数据表选择所有复选框

选择全部的演示并不真正起作用。 https://datatables.net/extensions/select/examples/initialisation/checkbox.html

在通过columnDef属性创建后，实现全选复选框的最佳方法是什么？

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']] }); 

有关代码和演示，请参阅此示例 。

有关更多示例和文档，请参阅Checkboxes项目页面。

Answer 3

您可以使用dataTable本身使用按钮提供此选项 。

dom: 'Bfrtip', buttons: [ 'selectAll', 'selectNone' ]'

这是一个示例代码

 var tableFaculty = $('#tableFaculty').DataTable({ "columns": [ { data: function (row, type, set) { return ''; } }, {data: "NAME"} ], "columnDefs": [ { orderable: false, className: 'select-checkbox', targets: 0 } ], select: { style: 'multi', selector: 'td:first-child' }, dom: 'Bfrtip', buttons: [ 'selectAll', 'selectNone' ], "order": [[0, 'desc']] });