3

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

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

1) 用户可以浏览表格并随机选择/取消选择复选框。

2) 单击标题中的“全选”复选框应仅选中/取消选中所有当前可见的记录。

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":"applied"});函数，但它只是将所有行返回给我。我不知道为什么。

我已经使用上面的代码实现了 (1) 和 (2) 并且工作正常。唯一的问题是“全选”功能在不同页面上的行为。我查看了 datatables.net，但找不到与此相关的任何内容。

4

3 回答 3

5

这就是我最终为我的要求而实施的。虽然并不完美，但这段代码很好地实现了数据表中的“全选”列。

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

});

于 2013-08-14T11:10:40.177 回答
2

我使用函数“fnGetNodes”所以代码是：

  var table = $('#your-table-id ').DataTable();

  jQuery('#your-table-id .group-checkable').change(function () {      

            var checked = jQuery(this).is(":checked");

            jQuery( "input", table.fnGetNodes() ).each(function(){                  
                 if(checked)
                 {                                                                         
                    $(this).attr("checked", true);                                                                                                                    
                 }
                 else
                 {                                                                                               
                    $(this).attr("checked", false);                        
                 }
            })                
  });

其中 .group-checkable 是表头中用于选择所有行的复选框的类

于 2014-07-07T08:58:32.017 回答
1

您可以为此使用风险函数，将 pageNumber 和复选框状态保存在数组或其他内容中，然后选中或取消选中：

像这样：（注意，这不仅会在页面更改时触发）

$("#example").dataTable({
    "fnDrawCallback": function( settings ) {
        ....  
    }
});

或宽度：

$("#example").on("page", function() {
   ...
});

我希望它有帮助

于 2013-08-13T08:39:12.670 回答