Update datatables (1.10.x) with new Json data

dtnofx

Is there a way to update DataTables with new JSON data that my web site retreives from an Ajax service?

To be more specific, I have a SPA website where I use AngularJS. I build my table like so:

<code>
<table>
  <tbody>
    <tr ng-repeat="user in users">
      <td> {{ user.id }} </td>
      <td> {{ user.name }} </td>
    </tr>
  </body>
</table>
</code>

So basically DataTables is initialized with a "static" HTML table. When I update $scope.users in AngularJS, then the HTML table is updated, but DataTables still has a reference to the "old" values. So if I try to use the sort or filter functions in the table then it presents the old data again.

I tried to see if there's an API for updating datatables with just JSON data or a Javascript object. But all I could find where the ajax.json and ajax.url API's that sort of does what I need. But these make URL calls. But I already have AngularJS that does the web service calls for me.

So all I need is a way to re-bind the JSON data directly to DataTables. Is this possible somehow?

allan

Sure - use rows.add() and clear().

Allan

dtnofx

Is there also a way to make it read the HTML again instead of using an API like row.add()or rows.add()?

I'm actually already updating the DOM by updating the $scope.users variable. So if I could let DataTables re-read the HTML again then that would be so much better.

Is that possible?

allan

Is there also a way to make it read the HTML again

Two options:

1. Destroy the existing table, then update the HTML and finally initialise the new table.
2. Feed the tr elements directly into row.add().

Allan

dtnofx

Hi allan, thanks for the feedback. Feeding the tr elements to row.data() sounds look a good option to me.