I'm using the jquery DataTables plugin to display an array of objects. I would like to clear the table and redraw using the changed data. However, the only way I've been able to do that so far is to destroy the table and reinitialize. I'd like to know if there is a simple way to refresh from JS data source. This is what I'm doing, it works but feels wrong...

if (NAMESPACE.table){
  NAMESPACE.table.destroy();
}

NAMESPACE.table = $('#assets-table').DataTable({
  "data": filteredData,
  "columns": [
      { "data": "id" },
      { "data": "type" },
      { "data": "city" },
      { "data": "state"}
  ]
 });

I'm using the jquery DataTables plugin to display an array of objects. I would like to clear the table and redraw using the changed data. However, the only way I've been able to do that so far is to destroy the table and reinitialize. I'd like to know if there is a simple way to refresh from JS data source. This is what I'm doing, it works but feels wrong...

if (NAMESPACE.table){
  NAMESPACE.table.destroy();
}

NAMESPACE.table = $('#assets-table').DataTable({
  "data": filteredData,
  "columns": [
      { "data": "id" },
      { "data": "type" },
      { "data": "city" },
      { "data": "state"}
  ]
 });

• javascript
• jquery
• datatables

2 Answers 2

if you want to clear the data present in dataTable simply call table.clear() it clears all cells in table.

and then add new data using table.row.add().draw();

table.destroy() does not removes data present in cell of table, it only destroys the current instance of dataTable you created.

Make it simpler:

NAMESPACE.table = $('#assets-table').DataTable({
  "data": filteredData,
  "columns": [
      { "data": "id" },
      { "data": "type" },
      { "data": "city" },
      { "data": "state"}
  ],
 "destroy": true
 });