当前页面的 JQuery DataTables 列复选框

Posted 2023-05-09

【中文标题】当前页面的 JQuery DataTables 列复选框

【英文标题】：JQuery DataTables Column Checkbox For Current Page

【发布时间】：2017-06-10 02:19:54

【问题描述】：

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

);

【参考方案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);