Datatables throws error when having colspan in column headers

Datatables throws error when having colspan in column headers

fredlllllfredlllll Posts: 3Questions: 1Answers: 0

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...

This question has an accepted answers - jump to answer

Answers

  • fredlllllfredlllll Posts: 3Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited June 2021

    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

  • fredlllllfredlllll Posts: 3Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    Answer ✓

    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

Sign In or Register to comment.