Column sorting breaks when I use jquery to add a second header row

Column sorting breaks when I use jquery to add a second header row

danneelydanneely Posts: 3Questions: 2Answers: 0

I'm trying to create a table with a double header row and dynamically configured columns. Because of the latter requirement I can't create the table headers statically in the page and then just provide data via javascript.

I can create the bottom row of headers by passing suitable column data into the DataTable() call, but have am using javascript to create the html for the top row and then inject it into the table header. When I do that though, it breaks sorting. The sort arrows are still shown but don't function.

I have a fiddle with a stripped down example of what I'm trying to do:

https://jsfiddle.net/q0cv296a/

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599
    Answer ✓

    Hi @danneely ,

    Does this here work for you? I constructed both the top and bottom rows before initialising the table.

    Cheers,

    Colin

  • danneelydanneely Posts: 3Questions: 2Answers: 0

    That worked nicely. The only catch outside the scope of my fiddle, was also needing to manually delete the old header on table reload in addition to using DataTable().destroy() to clean out the data cells.

This discussion has been closed.