Question

我已经初始化了一个id 示例的数据表 -

var table = $("#example").DataTable({
    "aaSorting": [[4, "asc"]],
    select: true,
    dom: 'Bfrtip',
    buttons: [
        'excelHtml5',
        {
            extend: 'pdfHtml5',
            orientation: 'portrait',
            pageSize: 'LEGAL'
        },
        {
            extend: 'print',
            pageSize: 'LEGAL',
            title: 'Visible rows'
        },
        {
            extend: 'selectAll',
            className: 'selectall'
        }
    ],
    language: {
        buttons: {
            selectAll: "Select all rows"
        }
    }
});

当点击 selectAll 按钮时，我尝试使用以下代码搜索所有行后 -

table.on('search.dt', function (e) {
    e.preventDefault();
    $(".selectall").click(function (e) {
        e.preventDefault();
        var rows_after_search = table.rows({search: 'applied'}).nodes();
        rows_after_search.each(function () {
            $(this).toggleClass('selected');
        });
    });
});

此后我有点失落。 selectAll 仍在选择该页面上的所有行。

详细说明，假设Data-table的当前页面有10行。搜索后显示2行。现在我想在点击 selectAll 按钮时选择2行。

Answer 1

davidkonrad的代码大多是正确的，但它没有使用官方方法。这是正确的代码：

{
  extend: 'selectAll',
  className: 'selectall',
  action : function(e) {
    e.preventDefault();
    table.rows({ search: 'applied'}).deselect();
    table.rows({ search: 'applied'}).select();
  }
}

它不是简单地切换选择的类，而是调用方法＆＃39; select（）＆＃39;这反过来使＆＃34;取消选择全部＆＃34;按钮并显示页脚文本，告诉您已选择了多少行。

Answer 2

我相信您的一般问题是您没有重置取消选择（未过滤）的行。您只是为已过滤的行切换.selected，最终会在所有选定的行中结束。此外，我会将代码放在action方法中，因为您实际上覆盖了selectAll的默认功能。

{
   extend: 'selectAll',
   className: 'selectall',
   action : function(e) {
     e.preventDefault();
     table.rows({ page: 'all'}).nodes().each(function() {
       $(this).removeClass('selected')
     })
     table.rows({ search: 'applied'}).nodes().each(function() {
       $(this).addClass('selected');        
     })
   }
}

演示 - ＆gt;的 https://jsfiddle.net/sqmz7z76/

Answer 3

{
    extend: 'selectAll',
    className: 'selectall',
    action : function(e) {
        e.preventDefault();
        table.rows({ search: 'applied'}).deselect();
        table.rows({ search: 'applied'}).select();
    }
}

这是新版本的解决方案

Answer 4

h0dges的答案比davidkonrad更接近，但是如果没有应用过滤器，则会选择所有内容而不管当前页面（所以所有加载的记录，即使页面上只显示10条记录）。这是我能够提出的最好的整体方法。

{
  extend: 'selectAll',
  className: 'selectall',
  action : function(e) {
    e.preventDefault();
    roleTable.rows({ page: 'current'}).select();
    roleTable.rows({ search: 'removed'}).deselect();

  }
}

这将选择当前页面上的所有记录，并删除先前使用搜索功能过滤掉的所有内容。

使用＆＃39; selectAll＆＃39;选择搜索后的所有可见行。数据表中的按钮

4 个答案: