如何刷新DataTables排序和筛选信息 [英] How to refresh DataTables sort and filter info

问题描述

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

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

此DataTable的部分内容通过jQuery进行了更新，但更新后的内容在表中可见，而在排序或过滤时不反映出这种情况.

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.

请参见下面的html代码

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>

和javascript

and javascript

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

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

因此，如果您尝试对投票列进行排序或尝试通过jQuery设置的新值 60 进行过滤，则将无法正常工作

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

请参见以下工作示例 https://jsfiddle.net/bpali/d97bpqvs/3/

很明显，我的问题是如何使其发挥作用，因为在现实生活中，我必须通过不同页面节的不同Ajax请求不断更新DataTable的各个部分，而我不能只是将ajax源放在表上并重新加载桌子.

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.

推荐答案

这是正确的方法:

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

这篇关于如何刷新DataTables排序和筛选信息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！