Multiple sets of headers and footers appearing when redrawing table content

StanAccy

I have a table, that shows a filtered set of data (data generated server side, and whole page returned to client(). Datatables is overlaid on top and works great (attached to the markup ID of the ). If the user selects to see all the data (via a checkbox), I issue an Ajax request back to the server and the new table is re-rendered with all the data (same markup ID), but I end up with 2 sets of Datatables headers and footers so in the footer I see something like:

Showing 1 to 8 of 8 Entries
Showing 1 to 1 of 1 Entries

I get a new set of headers and footers for every Ajax request/re-render.

I am not loading the data via JSON - merely generating the table server side, and then sending back the HTML + JS to the client, where upon arrival, the DataTables init() code fires and sets itself up. It looks like I need to cleanup from the first render, but I dont know if this is possible?

Regards

Nick

StanAccy

After some further debugging, Im definitely re-initializing the DataTable, so weird behavior is expected. After reading several posts in the forums here, I thought there was code in place to detect such bad usage?

Since Im triggering the to be replaced, the OnDomReady event where I init the DataTable is being fired again ,and I dont see a way to detect it DataTables is already attached to my Table so that I can call fnDestroy() before reinitializing the table.

allan

> After reading several posts in the forums here, I thought there was code in place to detect such bad usage?

There is, but possibly you've found a way to bypass it? :-). Can you link to a test case showing the error please?

Allan

allan

> I am not loading the data via JSON - merely generating the table server side, and then sending back the HTML + JS to the client, where upon arrival, the DataTables init()

Just to check - are you rewriting the DOM? If you use `$().html()` to replace the table, that will cause this issue, since the check to stop this happening is node based, and `$().html()` replaces the nodes.

Allan

StanAccy

Thanks for the tips (and for Datatables itself!). Im working on the test case - given the server side component of this, its non-trivial to extract it out.
On the Ajax update, there's a find/replace going on in the DOM :

[code]
jQuery(element).after($newElement).remove();
[/code]

I need to get Datatables to re-initialize since the DOM table data changes, but I dont know how to "find" the existing Datatable object in the onDomReady event (specifically tied to the table markup ID since there could be >1 Datatable on the page) so that I can destroy the old object and then let a new one be created.

StanAccy

Ok, I found some other code on the forums to clean up. In case it helps, I added this:

[code]
var s = $(document).dataTableSettings;
if ('undefined' != s) {
var len = s.length;
for (var i = 0; i < len; i++) {

// if already exists, remove from the array
if (s[i].sInstance == id) {
s[i].oInstance.fnDestroy();
}
}
}
[/code]

Im calling fnDestroy(). The code I found was invoking s.splice(i,1). I think fnDestroy() is the way to go.