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

Posted 2023-02-22

【中文标题】使用数据表中的“全选”按钮搜索后选择所有可见行

【英文标题】：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 行。

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

这是新版本的解决方案

【讨论】：

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