Table headers getting duplicated above table
Table headers getting duplicated above table
I'm creating a data table using a data array.
I have a larger dataset, and I have enabled paging. Sometimes when changing page length, the headers get duplicated outside of the data table.
Example:
http://fredmcleod.000webhostapp.com/datatable.html
Scroll down about halfway down the data in the table
Change the number of records per page from 50 to 100
Column headers are displayed above the rest of the data table.
Also happens with this fiddle, but this is more complicated because of the jsfiddle containers:
https://jsfiddle.net/ktnhjpjm/
Can you tell what's causing this and how I can prevent it?
This question has an accepted answers - jump to answer
Answers
It is because of the combination of
scrollY
andfixedHeader
They both serve the same purpose.
scrollY
lets you scroll within the table and keep the rest of the dom as is.fixedHeader
let's you scroll normally and it will copy a floating header on the page as soon as it gets out of view.Use either one, but not both.
You are my new best friend! This was driving me nuts, and you were absolutely right, this solved the problem. Thanks for answering.