Bootstrap Switch Toggle working on Datatables第二页
Bootstrap Switch Toggle working on Datatables第二页
提问于 2020-05-01 16:13:55
我有包含在Datatables中的数据列表。问题是，我必须在第二页切换不起作用，等等。我在某处读到，这就是DOM的问题所在，我试图更改代码，但仍然找不到任何解决方案。这是我的代码：
<table class="table table-striped table-bordered" id="table-list-tour" style="width:990px !important">
<thead>
<tr>
<th>Image</th>
<th>Code</th>
<th>Tour Name</th>
<th>Recommended</th>
<th class="action">Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($tours as $tour) : ?>
<tr>
<td><img class="img-preview" src="<?php echo h(get_uri('upload/tour/' . $tour['image'])) ?>" alt=""> </td>
<td><?php echo h($tour['generic_id']) ?></td>
<td><?php echo h($tour['name']) ?></td>
<td style="text-align:center">
<input type="checkbox" class="toggle" <?php if ($tour['is_featured']) echo 'checked' ?> id="toggle<?php echo h($tour['id']) ?>" />
<script>
$(document).ready(function() {
$('#toggle<?php echo h($tour['id']) ?>').bootstrapSwitch({
onSwitchChange: function () {
var isChecked = $(this).is(":checked");
$.ajax({
url : '/admin/tour/toggleRecommendation',
type : 'post',
data : {'id':<?php echo h($tour['id']) ?>},
success:function(data)
{
if (isChecked && data !== '') {
$(this).attr('checked', false);
alert(data);
}
},
error:function()
{
alert('Toggle Failed !');
}
});
}
});
});
</script>
</td>
<td class="action-group">
<a href="<?php echo h(get_uri('/admin/tour/update/?id=' . $tour['id'])) ?>" class="btn btn-primary tooltips" title="Edit"><i class="fa fa-pencil"></i><span>Edit</span></a>
<a href="<?php echo h(get_uri('/admin/tour/imageDetail/?tourId=' . $tour['id'])) ?>" class="btn btn-primary tooltips" title="Galeri Foto"><i class="fa fa-picture-o"></i><span>Image Gallery</span></a>
<a class="btn btn-danger tooltips" data-toggle="modal" data-target="#deleteModal<?php echo h($tour['id']) ?>"><i class="fa fa-trash"></i><span>Delete</span></a>
<div class="modal fade" id="deleteModal<?php echo h($tour['id']) ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<p class="modal-title content-title" id="deleteLabel">Delete Item</p>
</div>
<div class="modal-body">
<p>Are you sure want to delete this item?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-danger" onclick="window.location.assign('<?php echo h(get_uri('/admin/tour/delete/?tourId=' . $tour['id'])) ?>')"><i class="fa fa-trash-o"></i> Delete</button>
</div>
/div>
</div>
</div>
</div>
</td>
</tr>
<?php endforeach ?>
</tbody>
</table>所以，我把脚本放在每一件东西上。并且jquery不起作用，切换只是出现在一个复选框中。
回答 1
Stack Overflow用户
发布于 2020-08-05 18:23:17
您必须添加以下行
// `enter code here`Call this function before datatable initililzation '
///////////////////Example///////////////////////////
$(function () {
$("input[data-bootstrap-switch]").each(function(){
$(this).bootstrapSwitch('state', $(this).prop('checked'));
});
///////////////////Before Below Datatable Initilization///////////////////////////
$("#example1").DataTable();
$('#example2').DataTable({
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false,
});
});
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61538958
复制相关文章
相似问题
腾讯云开发者
