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?
This discussion has been closed.
Answers
You can call
destroywith an overload set totruein 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
emptyafter yourdestroycall.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