fixedHeader issue with two tables when using ServerSide and Processing

smoldovanskiy

When you have two table one on top of the other and are using fixedHeaders for both. When using ServerSide and Processing, the fixedHeader gets applied to the second table before the rows of the first one get shown (if the top table takes longer to load than the bottom one). This causes the fixedHeader of the bottom table to be in the wrong position (it applies when scrolling the top table)

I see there is fixedHeader.adjust() but what event of the top table would you use? I tired on drawCallnack and rowCallback, but at these points the rows of the table have not been rendered yet. Is there like a postRender event that can be used to adjust the fixedHeader of the bottom table?

colin

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

smoldovanskiy

i don't see how its possible to set up an example with serverside code using those services

smoldovanskiy

I cannot provide link since it is an internal application

smoldovanskiy

I just need to update the fixedHeader of the bottom table after the top table completes loading...

kthorngren

I feel like FixedHeader with two server side Datatables is working here:
http://live.datatables.net/fihoqomo/1/edit

I added a delay in the Ajax function for the top table to make sure the bottom loads first. Please update the test case to replicate the issue you are having.

Kevin

colin

I was seeing in Kevin's example (thanks for that) if not full screen. I made the both tables alike here and everything seems to behaving as expected. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

smoldovanskiy

Thank you for providing the example kthorngren, it replicates my issue exactly. The delay is what causes the problem.

Colin, I updated your example with the delay and it now has the same problem.

http://live.datatables.net/fihoqomo/3/edit

What I am trying to figure out is how to adjust the header of the bottom table using the code below. All of the events that I see for the datable happen before it renders on the page... But at that points it too early to update the bottom table.

$('#example2').DataTable().fixedHeader.adjust()

smoldovanskiy

The header of the second table gets fixed at the point it is rendered, this is a problem if the top table is not rendered yet.

Is there a way to do this

$('#example2').DataTable().fixedHeader.adjust()

After the top table renders?

colin

You can use initComplete for that - see here. This seems to be working

Colin

smoldovanskiy

That works! Thank you kindly!