更新 Jquery 数据表单元格值

Question

我有一个 jquery 数据table，里面有很多跨度。 table 与来自数据库的 ajax 数据一起加载，然后当用户更改值时，跨度会动态更新以匹配具有相同 class 的所有其他跨度。

我遇到的问题是，当我更新跨度数据时table 似乎不知道它已更新。

例如，如果我将值更新为 555，然后搜索 555，则不会 return 结果。

我尝试使用 .draw() 但它似乎不起作用。我如何让 datatable 更新所有单元格值而不破坏和重建 table。销毁似乎是大材小用。

Answer 1

像这样将 table 定义为全局变量

HTML更新使用 <td class="changemade">Tiger Nixon</td>。从您的代码中删除跨度。要访问单元格，您必须为 td 提供 class 名称或 ID，而不是跨度。

var table;
$(document).ready(function() {
  ........
  // DataTable
  table = $('#example').DataTable();
  ........
  });
$('.changebutton').on('click', function () {
    // update cell value based on selector
    table.cell($('.changemade')).data('MEOW!').draw()
});
});
//and use this code to listen the draw event.
table.on('draw', function() {
  alert('table has been re-drawn')
});

DEMO

在您的 fiddle 中，搜索有效，因为变量 table 和 search function 在同一范围内，但 table.draw 超出范围，因此无法正常工作

Answer 2

我已经为此纠结了一段时间，我认为这可能与数据表使用的缓存有关。但我发现的是，如果您找到该单元格，则将数据属性设置为它工作的单元格的 html 值。所以例如你会做这样的事情。

var UpdateTD = $(".changemade").parent('td');
table.cell( UpdateTD ).data( UpdateTD.html()).draw();

这是我找到的使它起作用的唯一方法。这似乎不是执行此操作的最佳方法，但它确实有效。这是更新后的 fiddle 展示它的实际效果 https://jsfiddle.net/jebwq9yL/1/

更新 Jquery 数据表单元格值

Update Jquery Datatable Cell Value

datatable

jquery