如何强制数据表重新渲染或重新加载静态数据？答案

【问题标题】：How to force Datatables to re-render or re-load static dat?如何强制数据表重新渲染或重新加载静态数据？
【发布时间】：2016-05-12 12:34:24
【问题描述】：

我有一个使用 HTML 文件中的静态数据的数据表。

使用“columnDefs 数据”函数或“columnDefs 渲染”函数，我可以执行一些输出调整——根据它们的内容以及它们在当前显示页面上的位置来消隐一些 TD（不改变数据源）。

但是，当用户更改显示的行数时，我需要重置并重新对数据进行调整，因为不同的单元格现在需要空白，而之前空白的条目可能需要再次显示。

所以，我想做的是在“length.dt”事件（显示行数刚刚改变）中，调用 something 导致 Datatable 重新渲染整个表格，或重新加载整个数据（从而调用我的 columnDefs 渲染或 columnDefs 数据函数）

这可能吗？还是我的方法有缺陷，我需要另辟蹊径？

【问题讨论】：

澄清：您加载一些数据，并使用渲染修改输出。您现在希望能够将数据“重置”到预渲染（即未修改）状态吗？对吗？
没错。当可见行数改变时重置，这样我就可以从头开始修改输出。
使用render 在渲染点修改数据，因此得名。您可以做几件事 - 在render 中有一个条件，它在一种情况下修改输出，在另一种情况下显示未修改的数据。或者查看“fnRowCallback”，您可以在呈现行后使用它来修改数据。同样，必须有一个条件语句来确定要显示的内容。或者在表格渲染完成后使用 jquery 修改表格，然后fnDraw() 会将其重置为未修改状态。
Render 似乎只在第一次创建表时被调用一次。如果我稍后做某事，比如更改显示的行数，则不会再次调用渲染。这就是我正在寻找的东西。一种强制渲染再次发生的方法，从而在行数发生变化时重置将要绘制的数据。
您是在谈论行级别的render，即'render': function (data, type, full, meta) {？确实在每次绘制表格时都会被调用 - 调试它或放入 alert 以检查这一点。

标签： javascript jquery datatables

【解决方案1】：

使用rows().invalidate() 使所有行的数据无效，使用draw() 重绘表格。

如果您使用 Javascript 数据结构（带有data 或columns.render 选项），请注意rows().invalidate('data') 中的'data' 是必需的。

$('#your_table').DataTable()
   .rows().invalidate('data')
   .draw(false);

【讨论】：

是的，我正在使用 AJAX 更改值，并且当服务器上的数据发生更改时，这些行很方便，因此它会强制重新渲染以获取最后的信息。

【解决方案2】：

您可以在 length.dt 事件上重绘整个 DataTable。

$('#your_table').on('length.dt', function (){
     setTimeout(function() {
         //draw('page') redraws your DataTable and preserves the page where it was
         $('#your_table').DataTable().draw('page');
     }, 100);
});

编辑

在这里你可以看到更多信息和其他参数传递给draw方法：https://datatables.net/reference/api/draw%28%29

【讨论】：

我试过了。它不起作用。 Draw() 使用了一组已经被我的代码修改过的数据。（即单元格已清空的数据，而不是完整的源数据）我需要重置该数据（即重新填充我从原始静态源数据中删除的单元格），以便我可以再次执行调整（消隐）。
但是如果已经在空白处重新绘制单元格，为什么还需要重新加载原始源数据并再次空白呢？
因为单元格是否应为空白取决于显示的行数。所以当用户更改显示的行数时，我需要从原始数据开始，然后相应地调整输出。
也许你需要用jQuery或DOM从0重新创建表，然后将其转换为DataTable，但这可能不是更好的选择。

【解决方案3】：

使用'destroy': true。

$("#your_table").dataTable({
  'destroy': true
})

【讨论】：