当前页面的 JQuery DataTables 列复选框

Question

我找不到这个问题的答案，但我正在尝试使用带有复选框列的 DataTable 来选择当前页面的所有行。我遇到的问题是，当您单击第 1 页上的全选复选框时，会检查所有页面（但不检查除第 1 页之外的行）。因此，该列在所有页面之间共享。

我不希望这样 - 仅在用户引发事件时保留当前页面和状态。数据列是从数据库中拉进来的，而复选框列显然不是。我在复选框列和每行中的复选框上都有点击事件。

    $scope.oTable = $('#simpleDataTable').dataTable({
    "destroy": true,
    "bDestroy": true,
    "aoColumnDefs": headerData,
    "aaData": $scope.aData,
    "processing": true,
    "deferRender": true,
    "aoColumns": [{
    "sTitle": '<div class="checkbox checkbox-success" style="padding-left:5px;">' +
        '<input id="tblCheckbox" name="tblCheckbox" class="styled" type="checkbox">' +
        '<label for="tblCheckbox" ></label>' +
        '</div>',
    "mData": "id",
    "mRender": function(data, type, full) {
        var DRP = "" ;

        if(full.d){
            DRP += "<span title='Answers' class='orangeColr'>"+full.d+"</span>";
        }
        if(full.r){
            DRP += "<span title='Company' class='greenColr'>"+full.r+"</span>";
        }
        if(full.p){
            DRP += "<span title='Payment' ng-if='full.p' class='perpulColr'>" + full.p + "</span>";
        }

        full.DRP = "<div class='text-center'>"+DRP+"</div>";
        full.DRP = $.trim(full.DRP);

        return '<div class="checkbox checkbox-success">' +
            '<input type="checkbox" class="tblCheckbox_' + data + '" id="tblCheckbox_' + data + '" class="styled"  >' +
            '<label for="tblCheckbox_' + data + '"></label>' +
            '</div>';
    },
    bSortable: false
    }],
    "iDisplayLength" : $scope.pageQuantity,
    "oLanguage": {
    "sLengthMenu" :"| View <span class='valueStyle1 activeGroup'>25</span>&nbsp;&nbsp;<span class='valueStyle1' >50</span>&nbsp;&nbsp;<span class='valueStyle1'>100</span>",
    "sInfo": "_START_ - _END_ of _TOTAL_",
    "sInfoEmpty": "0 - 0 of _MAX_",
    'oPaginate' : {
        "sFirst": "&laquo;",
        "sLast": "&raquo;",
        "sNext": "&rsaquo;",
        "sPrevious": "&lsaquo;",
    },
    "sInfoFiltered": '',
    },
    scrollY: $scope.scrollYheight || (
    $(window).height()-$("#filterPophoverContent").height() + 140
    ),
    scrollX: true,
    scrollCollapse: true,
    paging: true,
    pagingType: "full_numbers",
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
    },
    'fnDrawCallback' : function( oSettings  ) {

    },
    "dom": '<"top"f>rt<"bottom"ilp><"clear">',
    "bRetrieve": true

});

Answer 1

我意识到我哪里出错了。我没有在此处发布的代码中包含单击事件侦听器，但这就是失败的地方。它们在正确的位置被调用（fnDrawCallback），但我没有在每次页面绘制时删除并重新添加点击事件。此外，复选框更新代码需要包装在 setTimeout() 函数中，以便在更新复选框之前留出足够的时间来绘制页面。

    setTimeout(function()
            {
                var allChecked = true;

                $('table tbody td input[type="checkbox"]').each(function() 
                {
                    if(!$(this).is(':checked')) 
                    {
                        allChecked = false;
                        return;
                    }
                });

                $('table thead th input[type="checkbox"]').prop('checked', allChecked);

                $('table thead th input[type="checkbox"]').off("click").click(function() 
                {
                    var chk = $(this).prop('checked');

                    $('table thead th input[type="checkbox"]').each(function()
                    {
                        $(this).prop("checked", chk);
                        $('table tbody td input[type="checkbox"]').prop('checked', chk);

                        if($(this).prop('checked'))
                        {
                            $("#data_checkboxAll").removeClass('hidden');
                            $("#data_checkAll").show();
                            $('table tbody tr td').css("background", "#ababab");
                        }
                        else
                        {
                            $("#data_checkboxAll").addClass('hidden');
                            $('table tbody tr td').css("background", "#fff");
                        }
                    });
                });
            }, 100);