I'm using BackboneJS to populate my table with multiple data sources. You do not need to know Backbone to assist in this question, as the issue is mainly a DataTables issue.

I initialise my Datatable when the Collection View is rendered the first time.

My issue is that I don't know how to tell DataTables how to reload its data from the DOM after each ajax request. Any idea on how to do this?

Another example is when loading some data for each row and then updating it accordingly (done by Backbone View). But I need to let Datatables know that the DOM table has changed.

Example changing the table from:

<table>
  <thead>...</thead>
  <tbody>
    <tr>
        <td>Some Data</td>
        <td>Some Data2</td>
        <td>Loading...</td>
    </tr>
    ...
  </tbody>
</table>

To:

<table>
  <thead>...</thead>
  <tbody>
    <tr>
        <td>Some Data</td>
        <td>Some Data2</td>
        <td data-order="5" data-search="5"><span class="some_classes">5</span></td>
   </tr>
      ...
  </tbody>
</table>

Any assistance would be greatly appreciated.

I'm using BackboneJS to populate my table with multiple data sources. You do not need to know Backbone to assist in this question, as the issue is mainly a DataTables issue.

I initialise my Datatable when the Collection View is rendered the first time.

My issue is that I don't know how to tell DataTables how to reload its data from the DOM after each ajax request. Any idea on how to do this?

Another example is when loading some data for each row and then updating it accordingly (done by Backbone View). But I need to let Datatables know that the DOM table has changed.

Example changing the table from:

<table>
  <thead>...</thead>
  <tbody>
    <tr>
        <td>Some Data</td>
        <td>Some Data2</td>
        <td>Loading...</td>
    </tr>
    ...
  </tbody>
</table>

To:

<table>
  <thead>...</thead>
  <tbody>
    <tr>
        <td>Some Data</td>
        <td>Some Data2</td>
        <td data-order="5" data-search="5"><span class="some_classes">5</span></td>
   </tr>
      ...
  </tbody>
</table>

Any assistance would be greatly appreciated.

• javascript
• html
• backbone.js
• datatables
• backbone-views

• A big part of Backbone is to store your data in models and collections, and have views listen to events on these objects so it can re-render itself when needed. I think you need to include your Backbone code in the question. – Tholle Commented Apr 10, 2016 at 12:28
• Okay I could add it, but the thing is: I can see that the DOM loads perfectly without using DataTables. My entire table is rendered with all its data, I only use Datatables since have too much data to display so I use Datatables' functionality for sorting, searching etc. My Backbone ponents work very well, but Datatables does not pick up DOM changes like Backbone, so I have to notify it to refresh from DOM. – Werner Raath Commented Apr 10, 2016 at 12:32
• Maybe this could be of help: stackoverflow./questions/12934144/… – 76484 Commented Apr 10, 2016 at 13:43

2 Answers 2

Use rows().invalidate() to invalidate the data held in DataTables for the selected rows.

For example, to invalidate all rows using original data source:

var table = $('#example').DataTable();

table
    .rows()
    .invalidate()
    .draw();

Please note that draw() will reset the table to the fist page. To preserve the page, use draw(false) instead.

I was searching for an answer to something similar. In my project the table's content is cleared and rewritten is vanilla JavaScript, and DataTables library was only included later in the project. Here's a trimmed down version of how I got it working with help of DataTables's isDataTable()-function.

The resultsTable is an empty <table>-tag in the beginning and the contents is written and updated in the updateTable()-function. The function is called when Json data is available through asychronous requests. The DataTables was only included later and if it had been in use from the very beginning, then maybe the implementation would be different.

I hope this is of help to anyone else.

table.js

export default class Table {
  constructor(tableId) {
    this.table = document.getElementById(tableId);
  }
  clearTable() {
    this.table.innerHTML = '';
  }
  writeTable(jsonData) {
    // json to html here
    const thead = ....;
    const tbody = ....;
    this.table.appendChild(thead);
    this.table.appendChild(tbody);
  } 
}

main.js

import Table from './modules/table.js';

// My class for writing json to html table
const table = new Table('resultsTable');

// Global variable for holding DataTable-API
let myDataTable

function updateTable(jsonData) {
  if ($.fn.DataTable.isDataTable(myDataTable)) {
    // Remove DataTable properties, if they are in use
    myDataTable.destroy();
    // Also empty the html table's content
    table.clearTable();
  }

  // (Re)Writes html thead and tbody to the table element
  table.writeTable(jsonData);

  // (Re)Set the table to use DataTables API
  myDataTable = $('#resultsTable').DataTable();
}