Destroy not fully removing all event listeners
Destroy not fully removing all event listeners
 cutterbl            
            
                Posts: 4Questions: 1Answers: 0
cutterbl            
            
                Posts: 4Questions: 1Answers: 0            
            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
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