Table headers getting duplicated above table

fredmcleod

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?

HPB

It is because of the combination of scrollY and fixedHeader

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.

fredmcleod

You are my new best friend! This was driving me nuts, and you were absolutely right, this solved the problem. Thanks for answering.