更新Jquery Datatable单元格的值

Question

我有一个带有许多 span 元素的 jQuery 数据表。该表通过 AJAX 从数据库中加载数据，然后当用户更改值时，这些 span 动态更新以与具有相同类的所有其他 span 相匹配。

然而，我遇到的问题是当我更新 span 元素时，datatable 不知道它已经被更新了。例如，我将值更新为 555，然后搜索 555，但没有返回结果。

我尝试使用 .draw()，但似乎不起作用。如何使 datatable 更新所有单元格值而不破坏和重建表格？Destroy 看起来像是非常过度的处理方法。

- Mav2287

---

你是否同时更新了客户端表格和数据库？搜索是在服务器端执行的吗？ - markpsmith

一切都是客户端的。最初的加载获取所有值以开始，这是唯一的ajax调用。此后，DataTable基本上像普通表格一样工作，不再有任何ajax调用。其他一切都是客户端的。如果您查看我对Michael Emerson的评论，这个fiddle jsfiddle.net/jebwq9yL说明了问题。 - Mav2287

我对客户端数据表格不是很熟悉，但我觉得你更新的是HTML，而不是底层的数据表格。也许像这样的东西会有所帮助：stackoverflow.com/questions/19629644/how-to-edit-a-row-in-the-datatable - markpsmith

我也认为这是问题所在。我似乎找不到一种方法来告诉数据表格我已经更改了单元格的HTML值。我查看了您提供的链接，但我的问题在于它讨论按列名进行操作，而我需要按span类进行操作。 - Mav2287

Answer 1

我已经花了一段时间在这个问题上，并且我认为它可能与datatable使用的缓存有关。但是我发现，如果您找到单元格，然后将数据属性设置为单元格的html值，它就可以正常工作。例如，您可以执行以下操作。

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

这是我找到的唯一使它正常运作的方法。看起来并不是最佳实践，但确实可以运行。这里是更新的示例，展示了它的运行情况https://jsfiddle.net/jebwq9yL/1/

- Mav2287

Answer 2

将table定义为全局变量，如下所示。

HTML更新 使用<td class="changemade">Tiger Nixon</td>。从您的代码中删除了span。要访问单元格，必须给td赋予类名或id，而不是span。

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')
});

演示

在你的fiddle中，搜索功能可以正常工作，因为变量table和搜索函数处于同一作用域，但是table.draw不在该作用域内，所以它不能正常工作。

- J Santosh

---

即使你这样做了，你仍然无法搜索到新的值。如果你搜索“MEOW!”，它仍然没有返回结果。我点击了按钮，看到尼克松的值改变为“MEOW!”，但是当我在全局搜索或名称搜索中搜索它时，它不会返回结果。 - Mav2287

很有趣，我不知道为什么它不适用于<span>，但是没有它却可以。如果我必须使用<span>，因为里面还有其他隐藏的元素，比如加载进度条。 - Mav2287

您的答案是正确的。Datatables需要一个选择器来更新值，因此我删除了span。如果您使用parent获取选择器，则可以，但是如果您有n个元素，而不能为每个span父级编写查找代码怎么办？ - J Santosh

我在我的生产代码中所做的是每次更新跨度时，我都会执行以下操作：ThisSpan.closest('table').DataTable().cell( ThisSpan.parent('td') ).data( ThisSpan.parent('td').html() ).draw(); 因此，本质上我所做的是告诉datatable将单元格中的html作为该单元格的数据值。 - Mav2287

像什么？我没听懂你的意思。 - J Santosh

你所需要做的就是能够选择该span。然后你回到dom中的TD。你可以使用它来选择单元格，并将单元格的数据值设置为该td的html值。这样，你告诉datatable数据值是你刚刚设置的html值。如果你像我一样有多个表格，甚至可以从span到datatable本身上升dom。 - Mav2287