cleanup fixedheader
cleanup fixedheader
ricktw
Posts: 4Questions: 0Answers: 0
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
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
This discussion has been closed.
Replies
Allan
Thank you.
Allan
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
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;
}
[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]
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