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

juzqafwq  于 2023-04-29  发布在  jQuery
关注(0)|答案(4)|浏览(177)

所以我使用这个属性“bStateSave”:true来保存jQuery Datatable的状态,但出于某种原因,它不适合我。它不保存搜索结果和分页等当我做的页面刷新。是否有其他参数需要与此同时进行。我主要是根据这一页上的信息
http://datatables.net/examples/basic_init/state_save.html
代码是太可怕的巨大张贴,我不知道什么剪辑我应该用张贴。先谢谢你的帮助。

rwqw0loc

rwqw0loc1#

首先,你要确保你有一个cookie,一旦你加载了你的页面,进入chrome,点击“设置”,然后“显示高级设置”,在隐私部分点击内容设置。
下面是该网站的代码示例,在我的Web应用程序中运行良好,并确保您拥有最新版本的插件。

$('#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控件和网格视图,如果使用内置于ASP.NET中的编辑项在分页第3页上,那么通过 AJAX 回发甚至部分回发后,它将默认为第1页。

osh3o9ms

osh3o9ms2#

我知道这个答案不是关于这个旧版本的数据表的,但我相信它会对新手有所帮助。
Datatables API从2011年到现在发生了很大变化。要保存数据表的状态,可以使用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
 });
} );

如果您想使用数据库来避免将它们存储在浏览器中,则必须使用选项stateSaveCallbackstateLoadCallback中定义的回调函数。
下面是一个包含示例和源代码的教程,向您展示如何实现上述所有方法:Datatables state save client and server-side

9lowa7mx

9lowa7mx3#

您在浏览器中查看时是否看到cookie?我正在使用Chrome和开发者工具查看您发送的链接的当前Cookie。我看到一个名为“www.example”的cookie www.example.com ”存储在我的机器上。在尝试自定义DataTables代码时是否看到此Cookie?

fnx2tebb

fnx2tebb4#

此解决方案适用于新版本。
谢谢@tgarrett的解决方案。这也是你的解决方案。

$('#MyExampleGrv').dataTable({
    stateSave: true,
    stateSaveParams: function (settings, data) {
        localStorage.setItem('DataTables_' + window.location.pathname, JSON.stringify(data));
    },
    stateLoadParams: function (settings) {
        var data = localStorage.getItem('DataTables_' + window.location.pathname);
        return JSON.parse(data);
    }
});

相关问题