How do I refresh/reload my DataTable from HTML source

Question

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.

Answer 1

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.