Datatables throws error when having colspan in column headers

fredlllll

using datatables 1.10.25

https://jsfiddle.net/fredlllll/6vxpuLsy/11/ here is a minimum working example.

i have a simple table that has a colspan=2 in the header. When running datatables on it, i get an error in the console "headercells[i] is undefined". this leads to the pagination not being added till i click on one of the headers. furthermore i cant sort by the colspanned column

meanwhile the documentation boasts that datatables is fully compatible with row and colspan https://datatables.net/examples/basic_init/complex_header.html

seems like this simple case slipped through the cracks...

fredlllll

just checked multiple versions and this breaks in all of 1.10.x and even in 1.9.x

kthorngren

There is a key sentence in the example you linked:

Each column must have one TH cell which is unique to it for the listeners to be added.

Your one thead with colspan doesn't meet this criteria. Click on the HTML tab of the example to see how that table is setup. You will need a second header row that has a th for each column for the event listeners.

For example:
https://jsfiddle.net/0wepdrhv/

Kevin

fredlllll

so there is no way to make it look like a normal column? cause this 2 level header thing is not what my client wants as design

kthorngren

I would look at using columns.render to combine the image with the coin, like this example. Maybe this will get you started:
https://jsfiddle.net/uhqn4azd/

You might need to add some styling to center the coin name.

Kevin