jQuery Datatable, saving state of the table like pagination, search etc

user1006072 picture user1006072 · Apr 24, 2012 · Viewed 21.9k times · Source

So I am using this attribute "bStateSave": true to save the state of jQuery Datatable but for some reason it doesn't work for me. It doesn't save search results and pagination etc when I do the page refresh. Is there some other parameter that needs to go in hand with this one. I am mainly going by the information on this page

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

The code is too freaking huge to be posted and I am not sure what snipped should I used to post. Thanks in advance for your help.

Answer

TGarrett picture TGarrett · Aug 6, 2014

First off, you want to make sure you have a cookie, hop into chrome once you loaded your page, click on "settings," then "show advanced settings," under the privacy section click on content settings.

Below is a code example from that site, that works fine in my web app and also make sure you have the most recent version of the plugin.

$('#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);
    }
});

What this code does, is makes a local storage instead of the cookie, and uses a page specific versus just using a generic identifier called Datatables, this way if you have a table on another page, there will be no conflicts. What this code will not do, this code will not save the pagination state if you are using ASP.NET controls and a gridview, if you use the generic CRUD operations built into ASP.NET such as EDIT/DELETE/UPDATE, and your edit item is on pagination page 3, it will default to page 1 after postback and even partial postback via AJAX.