Dynamic elements above FixedHeader revisited

Dynamic elements above FixedHeader revisited

nolancasternolancaster Posts: 2Questions: 0Answers: 0
edited February 2013 in FixedHeader
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?

Replies

  • sexsex Posts: 1Questions: 0Answers: 0
    Hey NolanCaster,

    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!
  • nolancasternolancaster Posts: 2Questions: 0Answers: 0
    My solution is based on Fixed Header.js v2.0.6. There were some changes in the 2.1.0wip that keep it from working quite right in that version.

    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.
This discussion has been closed.