how to destroy all datatable generated elements?

mv5492

Hi,

In my application I dynamically create and destroy elements. For datatables I can easily remove the table element but is there a way to remove everything dataTable generates and renders? For example,

jQuery('table').remove('.conmgmt');

removes the result of this:

var newTable = $(document.createElement('')).attr({'id': 'tableOne', 'class': 'conmgmt'}).append(' ArchiveID DatabaseName TableName Select Statement ArchiveID DatabaseName TableName Select Statement ');

$('body').append(newTable);

but these elements are left behind:

Show ]10] entries
Search: [ ]

I'd rather not remove all individual elements generated by dataTable one-by-one. Is there a way to revove it all at once?

Thanks,
Mike

allan

Hi Mike,

I've been meaning for a while to write a 'destructor' function, but not yet had a chance to get around to it. There isn't a way to quickly and easily do this at the moment. I suppose the easiest might be to wrap the table in a div of your own, clone the table before initialising DataTables, and then when you want to restore it - nuke the innerHTML of the wrapper div and stick in your cloned table. Brutal - but effective.

Having said that, a proper destructor function is on my to-do list, it's just a case of getting around to it :-)

Regards,
Allan

mv5492

Thanks again, Allan.

Here's how I made this work:

jQuery('div').remove('.dt');

var tableDiv = $(document.createElement('')).attr({'id': 'tabdivOne', 'class': 'dt'});
$('body').append(tableDiv);

var newTable = $(document.createElement('')).attr({'id': 'tableOne', .....

$('div#tabdivOne').append(newTable);

I'm not sure if anything is left behind in memory after each remove - I won't need it if so, but from a user's point of view it looks like what I was hoping for.

Mike

kiz

Hi, i've been using datatables for my ajax application,
my server return json data
the browser would give the json data into a datable replacing a div contents..
every ajax request, it always increase the memory usage of the browser,
may i know, what is the correct way to destroy the current datatable before i replace it?

allan

Currently - the correct way is not to destroy it... but rather reload its data. But this doesn't sound like an option - so you can simply delete the DOM nodes DataTables creates, unassign all event handlers, delete the settings object from $.ext.dataTablesSettings and set the object (if stored) to null. There will be an API function for this in v1.7 when I get around to that.

Allan

brentnorthey

Greeting Allan,

I am using the 1.7 Beta and I am having issues with the tables re-initializing using the destroy code. Basically my grid is created with a jquery ajax call into an aspx snippet which generates the data. Each time I call the aspx page I would assume the grid would destroy itself and recreate itself. The grid is being displayed in a jquery dialog. Once I generate the grid, then close the dialog and reopen it and generate the grid again I am getting this error. Any help on this matter would be greatly appreciated.

Microsoft JScript runtime error:'_aoSettings[...].nTable is null or not an object

The code it's executing is at line 5166 in the non minified code.

See grid init code below:

var sourceDataTable = $("#GridView1").dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bAutoWidth": true,
"iDisplayLength": 10,
"bLengthChange": false,
"bDestory": true,
"oLanguage": {
"sEmptyTable": "No Cases available for selection",
"oPaginate": {
"sFirst": "<<",
"sPrevious": "<",
"sNext": ">",
"sLast": ">>"
}
}
});