Datatable fixed header bug

RenanPorto

I'm using the datatable in a SPA (single page application) web and it works fine in the first table (that uses the fixed header) from the system.

But when I go to other page that uses datatable, the page work fine, but on the bottom of the page you have a "fixed header" strange. Is it a datatable bug?

I'm using the scripts: DataTables 1.10.18, FixedColumns 3.2.5, FixedHeader 3.1.4, Responsive 2.2.2

colin

Hi @RenanPorto ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

RenanPorto

Hi Colin,

Thank you for the fast answer.

The link to see the bug: http://live.datatables.net/huyelada/1/edit

Just click in the "Show me the bug !!" and scrolling to bottom the page. The TABLE there is no, why the fixed header appear?

• I don't know exactly if the bug is it, because I can not replicate the bug exactly as it is in the system.

colin

Hi @RenanPorto ,

Thank you for that test case, that helped. I agree that does look odd, I'll pass it up the chain for comment. One thing you could do in the meantime is this - it's calling destroy() before your func() overwrites the container, so this will remove all DataTables' tendrils such as that FixedHeader.

Cheers,

Colin

allan

Yup - what Colin suggests is exactly the right thing to do. Call the destroy() method before you remove the DataTable.

What is happening at the moment is that you remove the HTML from the document, but the event listeners for the scroll event on the page are still present. They are holding a reference to the header element and so will insert it as normal when scrolling is activated. DataTables doesn't attempt to monitor the DOM to look for external changes. You need to tell it via the API that something has changed.

Using destroy() is best practice anyway if you are removing a table, since otherwise you will end up with event (and thus memory) leaks, causing odd things like this to happen.

Allan

RenanPorto

Guys, thank you very much for the fast answer again.

Unfortunately it not solve my problem!

The complete context: I'm updating the JS scripts from a system and the system already uses the datatable but a VERY OLD version.
So, i just updated the scripts (the datatable too) and added the resource "fixedheader" from ONE table and the bug appear.

Is unviable for me put the .destroy() in each place that use the datatable, because are many.

Well, i will try to think a good solution.

Thank you again.