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.

Solution 1

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

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

Solution 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();

Solution 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.

Solution 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();

Solution 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

View more solutions

Comments

[panjo]

Thanks but with added "bDestroy": true error message is gone but I'm not getting date value, so the error is gone with date value as well. So, the problem remains.

[netwire]

Worked great for me just using bDestroy: true

[ebram khalil]

The new data 'll be added to the old data, then you 'll get table of both data

[Nis]

Can you please be specific? It didn't work for me when dataTable was not initialized and we try to destroy it. To solve it, I wrap it in try catch block.

[ah-shiang han]

my bad, it worked, i didn't empty() my table content after destroy so somehow the data kept getting added up

[andilabs]

should we now everywhere sitck to DataTable with capitalized D letter?

[Matthew Colley]

with the new API this should be up voted to the top as accepted answer

[jbd]

@andi -- capital 'D' is a mistake

[jbd]

re: capital D, thought this was a mistake, but it's not: datatables.net/new/1.10

[Neha Ghetia]

Thanks for solution it's worked for me just using bDestroy:true

[AJPerez]

In newer versions of datatables, the bDestroy option has been renamed to destroy (datatables.net/reference/option/destroy), however bDestroy is still working aswell.