jquery - 使用数据表中的 'selectAll' 按钮搜索后选择所有可见行

Question

我已经初始化了一个具有 id example 的数据表，如下所示 -

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

详细来说，假设数据表的当前页有 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();
  }
}

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