Dynamic elements above FixedHeader revisited
Dynamic elements above FixedHeader revisited
nolancaster
Posts: 2Questions: 0Answers: 0
I was having the same problem as described in this thread:
http://datatables.net/forums/discussion/10911/dynamic-elements-above-fixedheader-leads-to-chaos-anarchy/p1
I set up my table filter so that it would dynamically show/hide when an icon was clicked, which caused the cloned table headers to get out of sync with the real one. I found a (seemingly) simple way to fix this is to add a line in _fnScrollFixedHeader that hides the cloned header when it's above the table as such:
this._fnUpdateCache( oCache, 'sDisplay', "none", 'display', nTable.style );
And when below or middle, just do the opposite:
this._fnUpdateCache( oCache, 'sDisplay', "block", 'display', nTable.style );
It seems to work pretty well without the need to update for each iteration of a step function as discussed.
Somewhat related, I also found it helpful to call _fnUpdateClones in the scroll event listeners. The particular scenario involved two tables on a single page. When one was update via AJAX a scrollbar appeared on the page causing the cloned header width to not be correct on the other table,. Maybe there is a better way to handle this?
http://datatables.net/forums/discussion/10911/dynamic-elements-above-fixedheader-leads-to-chaos-anarchy/p1
I set up my table filter so that it would dynamically show/hide when an icon was clicked, which caused the cloned table headers to get out of sync with the real one. I found a (seemingly) simple way to fix this is to add a line in _fnScrollFixedHeader that hides the cloned header when it's above the table as such:
this._fnUpdateCache( oCache, 'sDisplay', "none", 'display', nTable.style );
And when below or middle, just do the opposite:
this._fnUpdateCache( oCache, 'sDisplay', "block", 'display', nTable.style );
It seems to work pretty well without the need to update for each iteration of a step function as discussed.
Somewhat related, I also found it helpful to call _fnUpdateClones in the scroll event listeners. The particular scenario involved two tables on a single page. When one was update via AJAX a scrollbar appeared on the page causing the cloned header width to not be correct on the other table,. Maybe there is a better way to handle this?
This discussion has been closed.
Replies
I have also been trying to fix this issue. I attemped your method but it seemed to break the fixed header. Could you provide an example of the fix on jsbin or jsfiddle? Thanks in advance, this is killing me!
I had to paste my whole FixedHeader.js file into the jsbin to get it to work, but the result is here: http://live.datatables.net/ocikoq/edit#javascript,html
If you click "Click Me" it should animate a div above the table, but without exposing duplicate header rows. The additions in question are in the function _fnScrollFixedHeader. I also added some analogous lines in _fnScrollFixedFooter.