cleanup fixedheader

ricktw

When FixedHeader is used on tables which can be removed from the dom and replaced by new tables (typical ajax stuff), it would be nice to remove FixedHeaders.

I've implemented a draft version of the 'destroy' code:
[code]
/*
* Function: destroy.
* Purpose: Destroys the 'fixed' header, footer and columns on an HTML table.
* Inputs: HTML table node:table - the HTML table of which to remove the 'fixed' headers, footer and columns
*/
FixedHeader.destroy = function ( table )
{
var tableID = table.id;
for ( var i=0 ; i

allan

Good plan! Bookmarked your discussion to remind me to put this into the code when I get home.

Allan

jayaram

Could you please confirm if this is fixed any of the releases. I am kind of in the same situation.
Thank you.

allan

No there isn't a release of FixedColumns with this patch in it yet I'm afraid. Its still on my to-do list!

Allan

mbjorke

I have run into a problem where the fixedHeader part is shown twice and I can only guess it is because the fixedHeader plugin doesn't have a destroy function. My problem shows in Firefox and Chrome, but not in IE8. I have an ajax call and a very customized search function to my table which is probably part of the problem.

The problem I get is that I get a double header when the page is loaded. The effect disappears when I re-size the window and also after scroll if the window has been re-sized on time.

I have tried the solution ricktw suggests above, but I'm not sure if I call the destroy function correctly.

I also tried figus solution: http://www.datatables.net/forums/discussion/4313/destroy-fixedheader/p1 but it looked like a lot of variable names have changed so it didn't look as simple as rickw solution.

Does anyone have a newer example it would be much appreciated? I can't give any live examples now since I'm working in a testing environment. I'm using the latest version (1.9.0) of dataTables. Great software by the way.

/marcus

allan

Can you link me to a test case which is showing the problem please? I suspect that something is moving the table from under the fixed header, and thus you need to call the http://datatables.net/extras/fixedheader/api#fnUpdate API method when that happens.

Allan

mbjorke

Thanks for quick reply Allan. It is hard to give a live example for me. I only have the code on my testing server that can't be reached by you. I'll try to explain the problem some more instead.

Part of the problem is that I have a customized search function that calls my getData function when I click some different checkboxes. The initTable works good a long as I don't add the new FixedHeader( oTable ); part.

Adding FixedHeader works good for me when I have only a static table without using my getData function. I don't use any json because it feels like too much job to reformat all the data I have via java code. A lot of formatting of the data is done on a jsp-page that also has some server side logic on it.

I'm trying to show some of the relevant code below instead:

// I'm calling tableAction which then calls initDataTable on first page
// load since I only wan't FixedHeader to be called once
tableAction();

var oTable = initDataTable();

function initDataTable() {
oTable = $('.data').dataTable({
"bRetrieve": true,
"bProcessing": true,
"bStateSave": true,
"bAutoWidth": false,
"bFilter": false,
"bInfo": false,
"bJQueryUI": true,
"bPaginate": false,
"aaSorting": [[1,'asc']]
});
}


function tableAction ()
{
initDataTable();

// making the table use fixed header
new FixedHeader( oTable );

}

function getData(sort) {
// Save last sort so we don't lose sorting if checkboxes are changed.
if(sort != undefined)
lastSort = sort;

// Show loading-indicator here...
waitingDialog({title: '', message:'Please wait when data is loading'});

// Returns the data generated in my jsp
$.post('showTable.do?' + lastSort, $('#searchForm').serialize(), function(rows) {

// Destroy old DataTable
$('.data').dataTable().fnDestroy();

// Update data
$('tbody.data-rows').html(rows);

// Create new DataTable
initDataTable();

// Close the waiting dialog box
closeWaitingDialog();
});

return false;
}

mbjorke

It solved this problem by removing the fixedHeader div from my getData function with a standard jquery remove:
[code]$('.fixedHeader').remove(); [/code]

The problem was probably that when I also have the [code]new FixedHeader(oTable);[/code] part inside the initDataTable function at the same time as my customized search function called the initDataTable.

My getData function now looks like this:
[code]// getData is called by my custom search function
function getData() {

// Returns the data generated in my jsp
$.post('showTable.do?', $('#search').serialize(), function(rows) {

// Destroy old dataTable
$('.data').dataTable().fnDestroy();

// Remove the fixedHeader div that somehow shows twice
$('.fixedHeader').remove();

// Update data
$('tbody.data-rows').html(rows);

// Create new DataTable
initDataTable();
});
return false;
}[/code]

allan

Nice one - thanks for updating me on this.

It would be nice if FixedHeader was a lot more responsive to the changes on the page to it knows what it should change. Perhaps with the newer DOM listeners that are becoming available this will be possible in future.

Allan