如何刷新DataTables排序和筛选信息

Question

For simplicity of the example I have a DataTable which I load from HTML.

This DataTable is having parts of its content updated through jQuery BUT the updated content while visible in the table, does not reflect when sorting or filtering.

See html code below

<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Votes</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>John</th>
      <th>Doe</th>
      <th id="entry1_votes">50</th>
      <th>London</th>
    </tr>
    <tr>
      <th>Hill</th>
      <th>Vaught</th>
      <th id="entry2_votes">120</th>
      <th>Berlin</th>
    </tr>
    <tr>
      <th>Charles</th>
      <th>Roy</th>
      <th id="entry3_votes">78</th>
      <th>Liege</th>
    </tr>
  </tbody>
</table>

and javascript

$(document).ready(function() {
  var dt = $('#example').DataTable({});

  $("#entry2_votes").text(60);
});

So if you try sorting Votes column or try filtering by the new value 60 set through jQuery it wont work

See this working example https://jsfiddle.net/bpali/d97bpqvs/3/

Obviously, my question is how to make it work as in my real life situation I have to update parts of the DataTable constantly through different Ajax requests of different page sections and I cannot just put an ajax source on the table and reload the table.

Answer 1

This is the correct way:

 $(document).ready(function() { var dt = $('#example').DataTable({}); dt.cell( $("#entry2_votes") ).data(60) ; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/> <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <table id="example" class="display" width="100%" cellspacing="0"> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Votes</th> <th>Location</th> </tr> </thead> <tbody> <tr> <th>John</th> <th>Doe</th> <th id="entry1_votes">50</th> <th>London</th> </tr> <tr> <th>Hill</th> <th>Vaught</th> <th id="entry2_votes">120</th> <th>Berlin</th> </tr> <tr> <th>Charles</th> <th>Roy</th> <th id="entry3_votes">78</th> <th>Liege</th> </tr> </tbody> </table> 

Fiddle: https://jsfiddle.net/HappyiPhone/d97bpqvs/7/

Answer 2

Check online demo

You have to reinitialize data table after updating with jquery or you can update by datatable in-built methods/api

  $('#example').DataTable().destroy();
  $('#example').DataTable().draw();