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

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 2

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 3

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