使用数据表中的"selectAll"按钮在搜索后选择所有可见行 [英] Selecting all visible rows after a search using 'selectAll' button in Data-table

问题描述

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

I have initialized a data-table having id example like this -

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 按钮后，我尝试用下面的代码选择所有行-

Than i have tried to select all rows after a search with below code when selectAll button is clicked -

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 仍在选择该页面上的所有行.

I am kind of lost after this. selectAll is still selecting all the rows at that page.

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

To elaborate, suppose there are 10 rows at the current page of Data-table. After search it is showing 2 rows. Now i want to select 2 rows while selectAll button is clicked.

推荐答案

我相信您的一般问题是您没有重置未选择(未过滤)的行.您只是在.selected中切换筛选的行，最终在所有选中的行中结束.另外，由于您实际上覆盖了selectAll默认功能，因此我会将代码放在action方法中.

I believe your general problem is that you are not resetting deselected (not filtered) rows. You are just toggling .selected for filtered rows, ultimately ending up in all rows being selected. Also, I would place the code in the action method, since you are in fact overriding the selectAll default functionality.

{
   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/

demo -> https://jsfiddle.net/sqmz7z76/

这篇关于使用数据表中的"selectAll"按钮在搜索后选择所有可见行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！