jquery - 如何在使用 JQuery DataTable 的字母搜索时激活全选复选框？

Question

如何在 JQuery 数据表上使用字母搜索功能时激活全选复选框。

我有一个数据表，我需要字母搜索和全选复选框。但是在 JQuery 数据表中使用字母搜索时，我的全选不起作用。

https://jsfiddle.net/yxLrLr8o/2216/

let datatable = $('#productTable').DataTable({
    "paging": false,
    alphabetSearch: { column: 0}, 
    "scrollY": "200px",
    dom: 'Alfrtip',

    columnDefs: [{
        orderable: false,
        className: 'select-checkbox',
        targets: 0
    }],

    select: {
        style: 'os',
        selector: 'td:first-child'
    },

    order: [
        [1, 'asc']
    ]
});

datatable.on("click", "th.select-checkbox", function() {
    if ($("th.select-checkbox").hasClass("selected")) {
        datatable.rows().deselect();
        $("th.select-checkbox").removeClass("selected");
    } else {
        datatable.rows().select();
        $("th.select-checkbox").addClass("selected");
    }
}).on("select deselect", function() {
    ("Some selection or deselection going on")
    if (datatable.rows({
            selected: true
        }).count() !== datatable.rows().count()) {
        $("th.select-checkbox").removeClass("selected");
    } else {
        $("th.select-checkbox").addClass("selected");
    }
});

标签： jquerydatatables

Answer 1

像这样尝试它应该可以工作

使用这个库https://www.gyrocode.com/projects/jquery-datatables-checkboxes/

$(document).ready(function (){
   var table = $('#productTable').DataTable({
       alphabetSearch: { column: 0}, 
       "paging": false,
       dom: 'Alfrtip',
       'columnDefs': [
         {
            'targets': 0,
            'checkboxes': {
             'selectRow': true
            }
         }
      ],
      'select': {
         'style': 'multi'
      },
      'order': [[1, 'asc']]
   });