首页 > 解决方案 > 刷新后数据表保持状态

问题描述

我有一个表,它会在一段时间内重新加载其数据,并且它应该在每次重新加载后保持状态。我试过使用"stateSave": true但没有成功。

有没有办法在每次数据重新加载后保持状态(搜索、分页)?是clear使表松动的状态吗?

这是我的代码 - JsFiddle

我对 DataTables 没有太多经验,所以请温柔一点。

标签: javascriptjquerydatatables

解决方案


状态正在保存,但其中一些被重新加载循环中的代码覆盖。

正在保存和保存的状态:

  • 排序(单击列标题)
  • 过滤(使用全局过滤器输入控件)。
  • 每页记录数(“显示 x 个条目”)

步骤: (1) 我打开您的网页副本,并更改​​这些项目。(2) 我关闭网页。(3) 我重新打开页面。以上项目均保留。

被您的代码覆盖的状态:

  • 分页(从第 1 页移动到第 2 页)

如果我这样做,那么当我关闭并返回页面时,我的分页选择不再在第 2 页上。

但是分页选择实际上保存了。

只是在重新打开页面时,在第一个表格绘制之前,您的代码会立即覆盖保存的值:

else table.clear().rows.add(data).draw();

因此,您永远不会看到用户应用的先前保存的分页。

当表格被清除并重新加载数据时,这基本上是应用新的分页,覆盖您保存的分页。


状态保存通过将数据保存到浏览器的本地存储来工作。它是存储页面更改(第 1 页到第 2 页)的地方。

您可以通过打开浏览器工具 (F12) 并为您的表找到本地存储条目来亲自查看这一点。

当您转到第 2 页时,您会看到:

在此处输入图像描述

这意味着:从第 10 条记录开始,每页显示 10 条记录

(请注意,第 10 条记录实际上是第 11 条,因为索引是从零开始的)。

如果您start在浏览器中查看此值,您将看到在刷新代码运行时它被重置为零。


推荐阅读