Destroy FixedHeader

figus

Hi!

I've been lookin through google and in this forum but I can't get to a succesfull answer.... I'm getting

Uncaught TypeError: Cannot read property 'scrollTop' of null

Everytime a scroll happens.... All I want to do is enable and disable FixedTables at some point

this is what I do:

Start:
[code]
oTable = $('#table').dataTable();

var o = new FixedHeader(oTable);
$('.fixedHeader').remove();

oTable.fnDestroy();

//Here the table is reloaded... but not through a ajaxSource.... the complete is rewritten

oTable = $('#table').dataTable();
[/code]

Of course that doesn't happen one after another... those happen at certain points.. but that's the order

and I get the error in line 43:FixedHeader.min.js - Uncaught TypeError: Cannot read property 'scrollTop' of null

If I do a [code]$(window).unbind('scroll');[/code]
I stop getting the error....

then i do a var o = new FixedHeader(oTable);
but now the fixed header is on top of the page... (in the correct X position but always at the top, not in the correct Y position)

Then I think it may be because I did the unbind('scroll'), so I make it again:
[code]jQuery(window).scroll(function(){FixedHeader.fnMeasure();for(var b=0,a=FixedHeader.afnScroll.length;
b

hpacheco

Currently I have multiple tables in a page, each one in its tab. Since I'm initializing every table on page load the fixed headers would be misplaced (the visible one would be ok but the others would be placed in the top left corner).
My work around is to destroy all the headers like this

[code]
$("body").children(".fixedHeader").each(function () {
$(this).remove();
});
[/code]

and then create a new header for the current table.

TLDR: I use that code

figus

Yep, I tried that, the problem is that I also destroy the datatable.... And after building the datatable again, I get the error about: cannot read property scrollTop

That is the same as $('.fixedHeader').remove();
No?? It just removes the div but not the bindings....

?

hpacheco

My bad, I just read the "any way to truly destroy the FixedHeader????" part :-)

Not sure if there's a way to destroy the "o" object, as far as I can remember I ended up removing the div because I couldn't find another way to get rid of the header..

I guess Allan could help :-)

allan

FixedHeader (really all of the plug-ins) need a destroy function built into them - which I'm afraid I've not done yet. It is on the to-do list though :-). What needs to be done is that the events be unbound from the document (the scroll), then remove any DOM elements FixedHeader has added. That should remove it permanently.

Allan

figus

Yay =D, after tyding the min version i could notice what I was missing xD

I manage to do my own fnDestroy() that serves for my purposes... this is what I did:

Move the
[code]jQuery(window).scroll .......[/code]

just before the [code]this.fnInit(b,a)[/code]

This because it binded the function to the scroll even when I wasn't using FixedHeader, but I also changed the binding... so I ended up with:

[code]
jQuery(window).bind('scroll.FixedHeader', function(){
FixedHeader.fnMeasure();
for(var b=0,a=FixedHeader.afnScroll.length;
b

figus

ok... now I know it does NOT work with multiple tables in the same page... so I made a few changes, at least it works in my tests =)

[code]
this.fnDestroy=function(){
var id = d.nTable.id
var i = jQuery.inArray(id, FixedHeader.idTablas);
if(i > -1){
jQuery('div.fixedHeader table#' + id).parents('div').remove();
FixedHeader.afnScroll.splice(i, 1);
FixedHeader.idTablas.splice(i, 1);
}
if(FixedHeader.afnScroll.length == 0)
jQuery(window).unbind('.FixedHeader');
};
[/code]

Also I had to add a new array to know which update function to delete, so I added this line:

[code]
FixedHeader.idTablas=[];
[/code]

just below
[code]
FixedHeader.oDoc={
iHeight:0,
iWidth:0
};

FixedHeader.afnScroll=[];
[/code]

Saludos!!!

Ha!!! just found this thing has an edit button =P

ok, I forgot 1 line =P (the line that populates the new array)

[code]
FixedHeader.idTablas.push(c.nTable.id);
[/code]

that line is just after the line that populates the afnScroll array and before the resize binding
[code]
FixedHeader.afnScroll.push(function(){
d._fnUpdatePositions.call(d)
});
FixedHeader.idTablas.push(c.nTable.id); //<-- HERE IS THE NEW LINE
jQuery(window).bind('resize.FixedHeader', function(){
FixedHeader.fnMeasure();
d._fnUpdateClones.call(d);
d._fnUpdatePositions.call(d)
});
[/code]

yuanyeqishi

thanks, it works well.

a_b_g

Fixed FixedHeader by figus's guide.
https://docs.google.com/open?id=0B-sElbU-CyJjc19WR2EyYzJTR0E