How To Refresh DataTables Sort And Filter Info

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

Solution 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/

Solution 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();