stateSave

Since: DataTables 1.10

State saving - restore table state on page reload.

Description

Enable or disable state saving. When enabled aDataTables will store state information such as pagination position, display length, filtering and sorting. When the end user reloads the page the table's state will be altered to match what they had previously set up.

Data storage for the state information in the browser is performed by use of the localStorage or sessionStorage HTML5 APIs. The stateDuration indicated to DataTables which API should be used (localStorage: 0 or greater, or sessionStorage: -1).

To be able to uniquely identify each table's state data, information is stored using a combination of the table's DOM id and the current page's pathname. If the table's id changes, or the page URL changes, the state information will be lost.

Please note that the use of the HTML5 APIs for data storage means that the built in state saving option will not work with IE6/7 as these browsers do not support these APIs. Alternative options of using cookies or saving the state on the server through Ajax can be used through the stateSaveCallback and stateLoadCallback options.

Type

This option can be given in the following type(s):

Default

  • Value: false

Examples

Enable state saving:

$('#example').dataTable( {
  stateSave: true
} );

Enable state saving and override state save/load handlers to use only the table's DOM id:

$('#example').dataTable( {
  stateSave: true,
  stateSaveCallback: function(settings,data) {
      localStorage.setItem( 'DataTables_' + settings.sInstance, JSON.stringify(data) )
    },
  stateLoadCallback: function(settings) {
    return JSON.parse( localStorage.getItem( 'DataTables_' + settings.sInstance ) )
    }
} );

Related

The following options are directly related and may also be useful in your application development.