Datatables全選複選框

Question

選擇全部的演示並非真正有效。 https://datatables.net/extensions/select/examples/initialisation/checkbox.html

在通過columnDef屬性創建後，如何實現select all複選框的最佳方式是什麼？

Answer 1

這應該爲你工作：

let example = $('#example').DataTable({ 
    columnDefs: [{ 
     orderable: false, 
     className: 'select-checkbox', 
     targets: 0 
    }], 
    select: { 
     style: 'os', 
     selector: 'td:first-child' 
    }, 
    order: [ 
     [1, 'asc'] 
    ] 
}); 
example.on("click", "th.select-checkbox", function() { 
    if ($("th.select-checkbox").hasClass("selected")) { 
     example.rows().deselect(); 
     $("th.select-checkbox").removeClass("selected"); 
    } else { 
     example.rows().select(); 
     $("th.select-checkbox").addClass("selected"); 
    } 
}).on("select deselect", function() { 
    ("Some selection or deselection going on") 
    if (example.rows({ 
      selected: true 
     }).count() !== example.rows().count()) { 
     $("th.select-checkbox").removeClass("selected"); 
    } else { 
     $("th.select-checkbox").addClass("selected"); 
    } 
}); 

我已經加入到CSS，但：

table.dataTable tr th.select-checkbox.selected::after { 
    content: "✔"; 
    margin-top: -11px; 
    margin-left: -4px; 
    text-align: center; 
    text-shadow: rgb(176, 190, 217) 1px 1px, rgb(176, 190, 217) -1px -1px, rgb(176, 190, 217) 1px -1px, rgb(176, 190, 217) -1px 1px; 
} 

工作JSFiddle，希望幫助。

Answer 2

對於jQuery Datatables，您可以使用Checkboxes擴展名。

var table = $('#example').DataTable({ 
    'ajax': 'https://api.myjson.com/bins/1us28', 
    'columnDefs': [ 
     { 
     'targets': 0, 
     'checkboxes': { 
      'selectRow': true 
     } 
     } 
    ], 
    'select': { 
     'style': 'multi' 
    }, 
    'order': [[1, 'asc']] 
}); 

查看this example的代碼和演示。

請參閱Checkboxes項目頁面爲more examples和documentation。