选中所有复选框在 JQuery 数据表的下一页上不起作用答案

【问题标题】：Select all checkboxes does not work on next page in JQuery datatables选中所有复选框在 JQuery 数据表的下一页上不起作用
【发布时间】：2016-12-30 12:01:04
【问题描述】：

我正在使用 JQuery 数据表。我想添加带有复选框的全选列，这样当我点击“全选”复选框时，该页面上的所有复选框都应该被选中。

我正在使用以下代码：

<table id="myTable" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th> Name</th>
            <th> Type</th>
            <th> Details</th>
            <th>Select <input type="checkbox" name="select_all" value="1" id="select-all"></th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($test as $data) { ?>
        <tr>
            <td><?php echo $data->name; ?></td>
            <td><?php echo $data->type; ?></td>
            <td><a href="/details">view details</a></td>
            <td><input type="checkbox" name="manuf[]" class="sub_chk" data-id="<?php echo $data->id; ?>"></td>


        </tr>
        <?php } ?>
    </tbody>
</table>
<script>
$(document).ready(function(){
$('#myTable').DataTable();
});

$('#select-all').on('click', function(e) {
if($(this).is(':checked',true))  
{
    $(".sub_chk").prop('checked', true);  
}  
else  
{  
    $(".sub_chk").prop('checked',false);  
}  
});
</script>

上面的代码适用于数据表的第一页，但是如果我选择第二页并且如果我选择了“全选”复选框，它会将我带到第一页，而不是选择第二页中的复选框。

有解决办法吗？

【问题讨论】：

标签： javascript jquery html datatables

【解决方案1】：

Working example

问题来自排序，您应该禁用包含全选复选框的th中的排序。

希望这会有所帮助。

【讨论】：

是的，你是对的，我的错。我没有意识到内容在加载时被转储到页面中，我认为它来自 AJAX，因为它在进行分页时确实应该如此。
@Zakaria Acharki 它不起作用..让我再次解释一下有一个包含所有数据的 jquery 数据表和一个带有复选框的列，它的标题有另一个复选框（选择该页面上的所有复选框） .如果我在第一页上，我单击全选所有行都被选中。没错，但是当我转到数据表的下一页时，标题选择所有复选框仍处于选中状态。如果我取消选择它，它会将我带到数据表的第一页，而不是选择第二页的复选框..
我认为问题出在排序上，尝试禁用具有select-all 复选框的th 上的排序，jsfiddle.net/UvjnT/1475
感谢删除排序工作，但复选框保持在以前的状态我怎么能把它设置回来，这意味着如果我在 jquery 数据表的第一页，我从 th 中选择全选复选框，然后我转到下一页，在下一页上，第 th 标题中的全选复选框仍保持选中状态如何在每一页上保持状态，例如，如果我在第二页上全选并转到第三页，第三页不应该显示为选中但如果我回到第二页，它应该显示为选中

【解决方案2】：

我希望此链接可以帮助您解决问题。谢谢

http://www.gyrocode.com/articles/jquery-datatables-how-to-add-a-checkbox-column/

【讨论】：

您有足够的声誉来暗示您对该网站及其期望的回答是独立的，而不是完全依赖外部网站的链接。请在您的回答中包含该网站的相关部分并进行总结，说明它与您尝试回答的特定问题的相关性和原因。