如何在不同的页面上实现只检查jquery DataTable中当前页面数据的“全部检查”功能？

Question

我有一个表，其中有大量的记录在数据表的帮助下分页。第一个标题列是一个全选复选框，每一行都有自己的复选框。

1）用户可以在表格中进行导航，并随机选择/取消选择复选框。

2）点击thead中的“全选”复选框，只能勾选/取消勾选当前可见的所有记录。

3）“全选”按钮应为数据表的不同页面保持一种状态（选中/未选中）。例如：如果用户单击第1页的“全选”并导航到下一页，则应取消选中“全选”复选框，再次单击该复选框将选中该页面中的所有行，而之前选中的复选框不受影响。

到目前为止，我有以下代码来处理检查选择：

$('#selectAllCheck').click(function(e) {

    var chk = $(this).prop('checked');
    var currentRows = $('#myTable tbody tr');

    $.each(currentRows, function(){
        $(this).find(':checkbox[name=statusCheckbox]').each(function(){
            $(this).prop('checked', chk);
        });
    });
  });

我知道_('tr',{“filter”：“appliced”}）；函数，但它只是将所有行返回给我。我不知道为什么。

我已经用上面的代码实现了（1）和（2）并且它工作得很好。唯一的问题是“全选”功能在不同页面上的行为。我查阅了DataTableshtml" target="_blank">.net，但找不到任何与此相关的内容。

Answer 1

这是我最终为我的需求实现的。虽然不是很完美，但这段代码很好地实现了DataTable中的“全部选择”列。

$(document).ready(function() {
oTable = $('#mytable').dataTable({
    "bJQueryUI" : true,
    "sPaginationType" : "full_numbers",
    "fnDrawCallback": function( settings ) {
            //managing the "Select all" checkbox
            // everytime the table is drawn, it checks if all the 
            //checkboxes are checked and if they are, then the select all
            // checkbox in the table header is selected
            var allChecked = true;
            $('#mytable tbody tr').each(function() {
                $(this).find(':checkbox[name=statusCheckbox]').each(function(){
                    if (!$(this).is(':checked')) {
                        allChecked = false;
                        }
                    });
                });
            $('#selectAllCheck').prop('checked', allChecked);
        },
        });

// This is to stop datatable to sort the column on checking the checkbox
$('thead').click(function(e){
    if (e.target.type == 'checkbox') {
        e.stopPropogation();
    }
});

// Click handler for select all checkbox that checks the rows on current view only
$('#selectAllCheck').click(function(e) {
    var chk = $(this).prop('checked');
    var currentRows = $('#mytable tbody tr');
    $.each(currentRows, function(){
        $(this).find(':checkbox[name=statusCheckbox]').each(function(){
            $(this).prop('checked', chk);
        });
    });
  });

}）；