使用数据表中的“全选”按钮搜索后选择所有可见行答案

【问题标题】：Selecting all visible rows after a search using 'selectAll' button in Data-table使用数据表中的“全选”按钮搜索后选择所有可见行
【发布时间】：2016-10-01 16:58:19
【问题描述】：

我已经像这样初始化了一个具有 example 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 行。

【问题讨论】：

标签： jquery datatable datatables

【解决方案1】：

我相信您的一般问题是您没有重置取消选择（未过滤）的行。您只是切换.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');        
     })
   }
}

演示 -> https://jsfiddle.net/sqmz7z76/

【讨论】：

感谢您的回答。一旦我以您的方式考虑它（删除选定的课程）并尝试过，但从未奏效。可能，将代码定位在 action 方法是唯一的方法。再次感谢。 :)
这行得通。但是，使用each 进行迭代相当慢
不反对，但这个解决方案似乎只能工作。它改变了正确的类，但实际上并没有选择项目（所以基本上，如果你选择了一些东西，你就不能用取消全选来取消选择它，或者得到它，或者......任何东西）。
@zozo，感谢您的提醒！诡异的。我回家后会调查的。

【解决方案2】：

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

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

它不是简单地切换“selected”类，而是调用方法“select()”，然后启用“取消全选”按钮并显示页脚文本，告诉您已选择了多少行。

【讨论】：

它可能应该取消选择所有行 table.rows().deselect() 而不仅仅是过滤的行。
这应该是公认的答案，它会触发实际的选择/取消选择机制，而不仅仅是切换类。

【解决方案3】：

h0dges 的答案比 davidkonrad 的更接近，但如果没有应用过滤器，则无论当前页面如何，都会选择所有内容（因此所有加载的记录，即使页面上仅显示 10 条记录）。这是我能想到的最好的整体方法。

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

  }
}

这将选择当前页面上的所有记录，并删除之前选择的任何被搜索功能过滤掉的记录。

【讨论】：

【解决方案4】：

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

这是新版本的解决方案

【讨论】：

为什么要重复另一个答案？