destroy()

Since: DataTables 1.10

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:
Returns:

DataTables API instance

Examples

Destroy an exisiting table on a button click:

var table = $('#myTable').DataTable();

$('#tableDestroy').on( 'click', function () {
	table.destroy();
} );

Reload a full table description from the server, including columns:

var table = $('#myTable').DataTable();

$('#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.