上一篇: jQuery Datatables插件没有保存状... 下一篇:预填充jquery令牌输入文本框

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

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何在不检查jquery数据表中当前页面数据的不同页面上实现“全部检查”功能？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

我想在我的表中有以下功能：

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’,{“过滤器”：“应用”});功能,但它只是将所有行返回给我.我不知道为什么.

我已经用上面的代码实现了(1)和(2),它工作正常.唯一的问题是不同页面上“全选”功能的行为.我抬头看着datatables.net但找不到与此有关的任何内容.

@L_675_21@

这是我最终实现我的要求.虽然不完美,但这段代码很好地实现了datatable中的“SELEct all”列.

$(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,chk);
        });
    });
  });