FixedColumns prevents checkboxes from being checked in DataTable header

bjuneau

Is this a bug? I finally nailed it down to the "FixedColumns" extension. When active in a DataTable it prevents a checkbox from being checked in the table header.

See my fiddle, and try clicking the checkbox in the header. The first table doesn't have fixed columns, but the last one does:

https://jsfiddle.net/5pg0c1zr/50/

allan

So what is happening here is you have a checkbox which has the id selectAll1, which is (more or less) hidden. You also have a label which is styled to look like a checkbox and it uses for="selectAll1".

Then when FixedColumns runs it clones those elements, including the label and its for attribute. Since there can be only one element with a given id, the cloned label still points to the original checkbox.

So it is actually being checked, but it is overlaid by the FixedColumn, so you can't see it, and the state isn't being updated.

To fix you could use a change event listener on the checkbox which would then sync up the original checkbox's state with the one in the FixedColumn.

Bit messy, but until Select supports a select all in the header, I can't see any other way of doing it at the moment.

Allan

bjuneau

That worked!

$("#selectAll1").on("change", function() {