fixedHeader issue with two tables when using ServerSide and Processing
fixedHeader issue with two tables when using ServerSide and Processing
smoldovanskiy
Posts: 62Questions: 8Answers: 0
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?
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
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
i don't see how its possible to set up an example with serverside code using those services
I cannot provide link since it is an internal application
I just need to update the fixedHeader of the bottom table after the top table completes loading...
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
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
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()
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?
You can use
initCompletefor that - see here. This seems to be workingColin
That works! Thank you kindly!