Cannot reinitialise DataTable - dynamic data for datatable
In the current version of DataTables (1.10.4) you can simply add destroy:true
to the configuration to make sure any table already present is removed before being re-initialised.
$('#example').dataTable({
destroy: true,
aaData: response.data
});
This helped me:
var table = $('#example').DataTable( {
// Clear previous data
destroy: true,
// Load new data with AJAX from data.json file.
ajax: "data.json"
} );
This tech note section from datatables explains the reason for this warning. Relevant information from there:
This error is triggered by passing in options to a DataTables constructor object when the DataTable instance for the selected node has already been initialised. For example:
$('#example').dataTable( { paging: false } ); $('#example').dataTable( { searching: false } );
The above documentation explains two ways to deal with this.
- Retrieve: It explains how to apply additional options after the initialization (works even if it is not initialized before) by using setting retrieve to true as follows:
table = $('#example').DataTable( { retrieve: true, paging: false } );
Destroy: In this case you can destroy the object explicitly by calling
table.destroy();
and then creating the table again. Or you can simply passdestroy: true
option as mentioned in the accepted answer.table = $('#example').DataTable( { paging: false } ); table.destroy(); table = $('#example').DataTable( { searching: false } );
Using destroy:true option:
$('#example').DataTable( { destroy: true, searching: false } );
Note: This error may also occur if you include your javascript file that creates the dataTable multiple times. I was using apache tiles and included it in base as well as extended definition which also resulted in this error.
Try something like below
var $table=$('#example').dataTable({
"aaData": response.data,
});
$table.fnDestroy();