jQuery Datatable,保存表的状态,如分页,搜索等

Question

所以我使用这个属性"bStateSave":true来保存jQuery Datatable的状态但是由于某种原因它对我不起作用.当我进行页面刷新时,它不会保存搜索结果和分页等.还有一些其他参数需要与这个参数一起使用.我主要是通过这个页面上的信息

http://datatables.net/examples/basic_init/state_save.html

这个代码太大了,无法发布,我不确定我应该发布什么剪辑.在此先感谢您的帮助.

Answer 1

首先,你要确保你有一个cookie,一旦你加载你的页面就跳进chrome,点击"设置",然后"显示高级设置",在隐私部分点击内容设置.

下面是该网站的代码示例,它在我的网络应用程序中运行良好,并确保您拥有该插件的最新版本.

$('#MyExampleGrv').dataTable({
    "bStateSave": true,
    "fnStateSave": function (oSettings, oData) {
        localStorage.setItem('DataTables_' + window.location.pathname, JSON.stringify(oData));
    },
    "fnStateLoad": function (oSettings) {
        var data = localStorage.getItem('DataTables_' + window.location.pathname);
        return JSON.parse(data);
    }
});

这段代码的作用是创建本地存储而不是cookie,并使用特定页面而不是仅使用名为Datatables的通用标识符,这样如果你在另一个页面上有一个表,就不会有冲突.这段代码不会做什么,如果您使用ASP.NET控件和gridview,如果您使用ASP.NET内置的通用CRUD操作(如EDIT/DELETE/UPDATE)和编辑,此代码将不会保存分页状态item在分页页面3上,在回发后默认为第1页,甚至通过AJAX进行部分回发.

Answer 2

我知道这个答案与旧版本的数据表无关，但我相信它会对新手有所帮助。

从 2011 年到现在，Datatables API 发生了很大变化。要保存数据表的状态，您可以使用 HTML5 LocalStorage 或 DB（ajax 回调）。要使用 localStorage 启用状态保存，请执行以下调用：

$(document).ready(function() {
$('#datatable').DataTable({
  stateSave: true,
 });
} );

如果您想使用sessionStorage而不是localStorage：

$(document).ready(function() {
$('#datatable').DataTable({
  stateSave: true,
  stateDuration:-1 //force the use of Session Storage
 });
} );

如果您想使用数据库来避免将它们存储在浏览器中，那么您必须使用在选项stateSaveCallback和stateLoadCallback中定义的回调函数。

这是一个包含示例和源代码的教程，向您展示如何实现上述所有方法：数据表状态保存客户端和服务器端

Answer 3

您在浏览器中检查时是否看到 cookie？我正在使用 Chrome 和开发人员工具来查看您发送的链接的当前 cookie。我看到我的机器上存储了一个名为“datatables.net”的 cookie。您在尝试自定义 DataTables 代码时是否看到此 cookie？