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 trying to take users input date for further process. I'm having following error.

DataTables warning (table id = 'dataTable'): Cannot reinitialise DataTable. To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy

function getDate() {
    var date = $('input[name="myDate"]').val();
    return date;
}

$('#myDate').click(updateDate);

function updateDate() { 
    $('#dataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "/Home/Ajax",
        "fnServerParams": function (aoData) {
            var date = getDate();
            aoData.push({ "name": "myDate", "value": date });
        },
        //... there's more
}

updateDate();

Script is put on the bottom of the page.

Answer 1

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

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

Answer 2

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 3

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 4

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 5

check if in your code there is a duplicated call to the datatable. If you accidentally initialize your table more than once, it returns exactly this error

Answer 6

The new Datatables API has a reload function that will get the data from the ajax source again without requiring you to destroy the table first. When I have a table with a large number of rows (5000+) the destroy takes longer than the initial load, plus the "processing" box doesn't show up when destroying, but a reload is quite fast and correctly shows the "processing" box when it's working.

Here is an updated version of the code in the question that uses the new API to achieve the desired effect:

function getDate() {
  var date = $('input[name="myDate"]').val();
  return date;
}

$('#myDate').click(updateDate);

// Use .DataTable instead of .dataTable
// It returns a different object that has the ajax attribute on it.
var myDataTable = $('#dataTable').DataTable({
  "bServerSide": true,
  "sAjaxSource": "/Home/Ajax",
  "fnServerParams": function (aoData) {
    var date = getDate();
    aoData.push({ "name": "myDate", "value": date });
  },
  //... there's more

function updateDate() { 
  myDataTable.ajax.reload();
}

The only change I've made is to use .DataTable instead of .dataTable and to maintain a reference to the return value myDataTable so that it can be used to call .ajax.reload().

Answer 7

This worked for me var table = $('#table1').DataTable({ destroy: true, responsive: true, ..... });

Answer 8

Clear the existing dataTable:

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

Answer 9

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

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