Second header row disappears when using scrollX: true

Second header row disappears when using scrollX: true

josibujosibu Posts: 6Questions: 2Answers: 0
edited May 2020 in Free community support

Test case: http://live.datatables.net/zeqomiqu/2/
As soon as you uncomment the line which says
"scrollX": true,
Then the second header row will disappear.

Does anyone know why?

Thanks

Answers

  • sandysandy Posts: 913Questions: 0Answers: 236

    HI @josibu ,

    When you use scrollX DataTables changes the dom so that the jquery selector you are using in that example no longer exists. You can see this by opening your browsers inspector. You can achieve the same behaviour just by using a different selector - see this example.

    Thanks,
    Sandy

  • josibujosibu Posts: 6Questions: 2Answers: 0
    edited May 2020

    Hi
    Thanks for the answer.
    As you can tell from the following example, the header is visible only partially, when scrolling to the right.
    http://live.datatables.net/zeqomiqu/2/
    Also, from my development environment I can tell that it does not align the <th>'s with the exact same width as the original header is after I change the content of the new <th>

  • colincolin Posts: 15,143Questions: 1Answers: 2,586
      $('.dataTables_scrollHead').clone().appendTo('.dataTables_scrollHead');
    

    This is modifying the table after DataTables has been initialised, so DataTables has no knowledge of it. Try cloning the header prior to the initialisation, or just add the second thead tr row into the HTML

    Colin

This discussion has been closed.