destroy()
Destroy the DataTables in the current context.
Description
DataTables adds a number of HTML elements, event listeners and other modifications in order to enhance the original HTML table with the features of DataTables. This method can be used to remove those enhancements and return the table to its original un-enhanced state, with the data shown in the table.
This function can be useful if you require to destroy and create new tables based on new criteria with different initialisation settings or a different number of columns in the table, as they cannot be change on-the-fly through the API. If you do not require to make changes to the features of the table and simply alter the data contained in the table, then consider using the clear(), ajax.url() and rows.add() methods.
Destroying a table is necessary to prevent memory leaks if you do wish to replace one table with another.
Type
function destroy( [ remove ] )
- Description:
Restore the tables in the current context to its original state in the DOM by removing all of DataTables enhancements, alterations to the DOM structure of the table and event listeners.
- Parameters:
Name Type Optional 1 removeYes - default:false Completely remove the table from the DOM (
true) or leave it in the DOM in its original plain un-enhanced HTML state (default,false).When set to
true, as of v1.10.8, DataTables will use thejQuery .remove()method to remove the table from the page - this results in any events that are bound to the table elements being automatically removed by jQuery. If set tofalsecustom events are not removed from the table - only the events that DataTables itself attached to the table.- Returns:
DataTables API instance
Examples
Destroy an existing table on a button click:
var table = new DataTable('#myTable');
$('#tableDestroy').on('click', function () {
table.destroy();
});Reload a full table description from the server, including columns:
var table = new DataTable('#myTable');
$('#submit').on('click', function () {
$.getJSON('newTable', null, function (json) {
table.destroy();
$('#myTable').empty(); // empty in case the columns change
table = $('#myTable').DataTable({
columns: json.columns,
data: json.rows
});
});
});Related
The following options are directly related and may also be useful in your application development.