Cannot reinitialise JQuery DataTable

Question

I\'m using jquery datatables to display data inside grid. On init page load script take DateTime.Today and process them further, problem is after init page load, when I\'m t

Answer 1

Try adding "bDestroy": true to the options object literal, e.g.

$('#dataTable').dataTable({
    "bServerSide": true,
    ....
    "bDestroy": true
});

Answer 2

The DataTables API has changed, but this error is still thrown if you try to reinitialize the datatable again.

You can check if it is already created with:

$.fn.DataTable.isDataTable("#myTable")

And to destroy it so that it can be recreated again:

$('#myTable').DataTable().clear().destroy();

It is not the most efficient way, but it works. It should be possible to update the table without destroying it first, just using clear and row.add, but I haven't found a way of doing that when the data source is an array passed to the constructor.

Answer 3

The first thing you wanna do is to clean and destroy your datatables.

var tables = $.fn.dataTable.fnTables(true);

$(tables).each(function () {
  $(this).dataTable().fnClearTable();
  $(this).dataTable().fnDestroy();
});

and then re-create.

$("#datagrid").dataTable();

Answer 4

var myDataTable = $('#dataTable').DataTable();
myDataTable.ajax.reload();

Absolutely this is what I am looking for.Nice solution to reintialise datat table

Answer 5

I know this is an OLD question. But this is for anyone else having similar issue.

You should destroy the old dataTable assignment. Before creating the new datatable use the following code

$("#dataTable").dataTable().fnDestroy();

Answer 6

Clear the existing dataTable:

$(this).dataTable().fnClearTable();
$(this).dataTable().fnDestroy();