My Experience With Data Table Save State

Hi everyone, hope all are doing good! This is my second blog and here I would like to share my experience with Datatable’s Save State. Datatable is a jQuery plugin with inbuilt features like searching, sorting, pagination, server-side processing, save state, etc.

Sometimes when users search in the table and navigate to a new page and again come back to the table, they are expected to view the same result they searched before or the particular page in the table. To achieve that we can use the save state option.

To enable the save state option in our DataTable we have to add the attribute state save and set the value to True. This will restore the state of the data table whenever the table gets reloaded or navigated through tabs.

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

Now we know that we can restore the previous state of our table even when we switch between tabs using the above-mentioned attribute, we want an option to set the time for storing the information right!

So, that is why we have another attribute called the ‘stateDuration‘ option to specify where & how long we need to store the state information. We can set the duration as per our own needs through the default value of about 2 hours (7200 seconds).

Datatable savestate Settings:

SessionStorage: Until the browser window is closed, this state is retained. But once the browser is closed, the state gets reset.
LocalStorage: State Information won’t have any expiry until the application or browser cache is cleaned up.
Duration: We can specify some duration and how long it needs to be stored and it will be cleared automatically after the specified duration. This information should be in seconds. For example, For one day, we have to specify this 60 * 60 * 24.

$(document).ready(function() {
    $('#example').DataTable( {
        stateSave: true,
        stateDuration: -1
    } );
} );

When saturation is

-1 it is stored in sessionStorage
0 or greater it is stored in localStorage.

When saveState is true, it will store pagination and search/filter values of the table. But I got a request to store only pagination and clear the search. So I searched for another option and came across the stateLoadparam callback in the data table.

Every time the page gets refreshed, the stateLoadparams callback retrieves the previous state from the session/local storage and applies those values to the data table. We can manipulate that to achieve this one.

In the below example, I have cleared the search value. So in the data table, only the pagination value alone gets reflected.

$('#example').dataTable( {
  stateSave: true,
  stateDuration: -1,
  stateLoadParams: function (settings, data) {
    data.search.search = "";
  }
} );

Hope this blog gives you a basic idea of how the state saves, saturation, and stateLoadparam work. Use them the next time you want to restore the state of your data table. Thank you for reading 🙂