javascript - 如何刷新数据表排序和过滤信息

Question

为了简单起见，我有一个从 HTML 加载的 DataTable。

此 DataTable 的部分内容通过 jQuery 进行了更新，但更新的内容虽然在表中可见，但在排序或过滤时不会反射(reflect)出来。

请参阅下面的 html 代码

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

和 JavaScript

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

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

因此，如果您尝试对 Votes 列进行排序或尝试按通过 jQuery 设置的新值 60 进行过滤，则不会起作用

请参阅此工作示例 https://jsfiddle.net/bpali/d97bpqvs/3/

显然，我的问题是如何让它工作，因为在我的现实生活中，我必须通过不同页面部分的不同 Ajax 请求不断更新 DataTable 的部分内容，而且我不能只是将 ajax 源放在表上并重新加载表。

Answer 1

正确的做法是:

$(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/