Bug in select plugin when showing checkboxes

jstuardo

Hello,

When using datatable, the header row is placed in <thead> tag and the body in <tbody> tag, however, the CSS is not consistent with this, causing the checkbox not to be displayed in header. Not even the demo in this page works.

In CSS, this styles are defined:

table.dataTable tbody th.select-checkbox

which is wrong. It shoud be

table.dataTable thead th.select-checkbox

Furthermore, since in some cases (when using scroll plugin), datatable is rendered containing 2 divs, one with "dataTables_scrollHead" class and the other with "dataTables_scrollBody" class. Both with the table inside.

If the classes shown above are used, 2 header checkboxes will be shown, so, every line that contains ""th.select-checkbox" should be prefixed with ".dataTables_scrollHead" to fix it.

On the other hand, in order for the click to work, I had to do this in draw.dt event of the datatable:

$('.dataTables_scrollHead th.select-checkbox').on("click", function () { if ($(".dataTables_scrollHead th.select-checkbox").hasClass("selected")) { tabla.rows().deselect(); $(".dataTables_scrollHead th.select-checkbox").removeClass("selected"); } else { tabla.rows().select(); $(".dataTables_scrollHead th.select-checkbox").addClass("selected"); } }).on("select deselect", function () { if (tabla.rows({ selected: true }).count() !== tabla.rows().count()) { $(".dataTables_scrollHead th.select-checkbox").removeClass("selected"); } else { $(".dataTables_scrollHead th.select-checkbox").addClass("selected"); } });

I hope you may think about fixing this in next release.

Thanks
Jaime

kthorngren

You may want to look at this thread:
https://datatables.net/forums/discussion/comment/143528/#Comment_143528

Allan explains the Datatables does not have a select all checkbox in the header.

I have this example for creating a select all checkbox in the header. Pay attention to the CSS tab for the styling to work. Give it a try, you can even update my example with Scroller, etc to see if it works.

Kevin