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

Question

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 1

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.

Answer 2

I know that this answer is not about this old version of datatables, but I believe it will help newcomers.

Datatables API changed a lot from 2011 to now. To save the state of a datatable, you use either HTML5 LocalStorage or DB(ajax callbacks). To enable state saving using localStorage, you do the following call:

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

If you want to use sessionStorage instead of localStorage:

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

If you want to use a database to avoid storing them in the browser, then you have to use callback functions defined in the options stateSaveCallback and stateLoadCallback.

Here is a tutorial with examples and source code that shows you how to implement all the methods above: Datatables state save client and server-side