Destroy not fully removing all event listeners
Destroy not fully removing all event listeners
I am attempting to 'destroy' an instance of a DataTable. Prior to initialization I run the following in the console:
$('#myTable').data('events');
undefined
After initializing my DataTable, I get the following:
$('#myTable').data('events');
Object { draw=[2], destroy=[2], order=[6]}
I then try to 'destroy' the instance with the following:
var $table = $('#myTable');
var dt = $table.DataTable();
dt.destroy();
From which a new console call shows me the following:
$('#myTable').data('events');
Object { draw=[2], destroy=[2]}
Inspecting the elements in Firebug shows that all of the data remains in the table (lots of DOM elements). I can add the following to my destruction script:
$('tbody', $table).empty();
This empties the table of data, but then I am unable to re-initialize the table.
What am I doing wrong here?
Answers
You can call
destroy
with an overload set totrue
in order to remove the datatable from the DOM and clear the event listeners.Snippet from the API docs:
Completely remove the table from the DOM (
true
) or leave it in the DOM in its original plain un-enhanced HTML state (default,false
).If you want to re-initialise the table with a different (column) structure then consider also calling
empty
after yourdestroy
call.Hope this helps,
What version of jQuery are you using? I don't appear to get any events showing if I use
$().data('events')
- example: http://live.datatables.net/jazunisi/1/edit .Allan