当前页面的JQuery DataTables列复选框

我找不到这个问题的答案，但我正在尝试使用带有复选框列的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

---

})

我意识到我错在哪里了。我没有在这里发布的代码中包含click事件侦听器，但这就是它失败的地方。它们在正确的位置被调用，但是我没有在每个页面上删除并重新添加click事件。此外，复选框更新代码需要包装在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);

---

我意识到我错在哪里了。我没有在这里发布的代码中包含click事件侦听器，但这就是它失败的地方。它们在正确的位置被调用，但是我没有在每个页面上删除并重新添加click事件。此外，复选框更新代码需要包装在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);