Javascript 如何强制数据表重新渲染或重新加载静态数据?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/35174913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 17:21:12  来源:igfitidea点击:

How to force Datatables to re-render or re-load static dat?

javascriptjquerydatatables

提问by Dave

I have a Datatable that uses static data from an HTML file.

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

Using either the "columnDefs data" function, or the "columnDefs render" function, I can perform some output adjustment - blanking out some of the TD's based on their content, and their position on the currently displayed page (without altering the data source).

使用“columnDefs 数据”函数或“columnDefs 渲染”函数,我可以执行一些输出调整 - 根据某些 TD 的内容和它们在当前显示页面上的位置(不改变数据源)将其消隐.

However, when a user changes the number of displayed rows, I then need to reset & redo my adjustments on the data, as different cells will now need blanking, and previously blanked entries may need showing again.

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

So, what I want to do is in the "length.dt" event (number of display rows just changed), call somethingthat causes the Datatable to either re-render the entire table, or re-load the entire data (which would thereby call my columnDefs render or columnDefs data functions)

所以,我想要做的是,在“length.dt”事件(显示行数只是改变),调用的东西引起的DataTable要么重新渲染整个表,或重新加载整个数据(这将从而调用我的 columnDefs 渲染或 columnDefs 数据函数)

Is this possible? Or is my approach flawed and I need to find another way?

这可能吗?还是我的方法有缺陷,我需要找到另一种方法?

回答by Gyrocode.com

Use rows().invalidate()to invalidate data for all rows and draw()to redraw the table.

使用rows().invalidate()为所有行无效数据,并draw()重新绘制表格。

Please note that 'data'in rows().invalidate('data')is required if you use Javascript data structure (with dataor columns.renderoptions).

请注意,如果您使用 Javascript 数据结构(带或选项)'data'rows().invalidate('data')则需要in 。datacolumns.render

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

回答by Khalav

You can redraw the entire DataTable on the length.dt event.

您可以在 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);
});

Edit

编辑

Here you can see more info and other parameters to pass to the draw method: https://datatables.net/reference/api/draw%28%29

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

回答by Vivekanand Panda

Use 'destroy': true.

使用'destroy': true.

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