Destroy not fully removing all event listeners

Destroy not fully removing all event listeners

cutterblcutterbl 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

  • AshbjornAshbjorn Posts: 55Questions: 2Answers: 16
    edited July 2015

    You can call destroy with an overload set to true 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 your destroy call.

    Hope this helps,

  • allanallan Posts: 63,552Questions: 1Answers: 10,477 Site admin

    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

This discussion has been closed.