Pramod Pramod - 4 months ago 24
jQuery Question

Cannot reinitialise DataTable - dynamic data for datatable

I have a datatable showing all employees.
It is working fine for all employees on

document.ready
.
I have a select tag containing the type of employees like
'project_manager' & 'team_leader'
, and on change of employee type I am calling a function
get_employees(emp_type)
and passing the selected employee type.

It is getting desired and proper data in ajax response, but throwing warning

DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3


I tried to destroy it, but no luck.

also tried for

$('#example').dataTable().fnClearTable();
$('#example').dataTable().fnDestroy();


it is clearing table and showing newly appended data, but adding new sort images with column name every time.

Here is my code snippet.

$(document).ready(function() {
get_employees('all');
});

function get_employees(emp_type)
{
$.ajax({
url: '../ajax_request.php',
type: "POST",
data: {
action: "admin_get_all_employees",
type: emp_type
},
success: function(response) {
var response = jQuery.parseJSON(response);

// $('#example').destroy(); tried this but haven’t worked

$('#example').dataTable({
"aaData": response.data,
});
}
});
}


Thanks in advance.

Answer

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
});
Comments