Question

为了简化示例，我有一个DataTable，我从HTML加载。

此DataTable的部分内容通过jQuery更新，但在表中可见时更新的内容在排序或过滤时不反映。

请参阅下面的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);
});

因此，如果您尝试对投票列进行排序或尝试使用通过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>

小提琴：https://jsfiddle.net/HappyiPhone/d97bpqvs/7/

Answer 2

Check online demo

使用jquery更新后必须重新初始化数据表，或者可以通过数据表内置方法更新数据表/ api

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

如何刷新DataTables排序和过滤信息

2 个答案: