Since: DataTables 1.10

Callback that defines how the table state is stored and where.


DataTables can save the state of the table (paging, filtering etc) when the stateSave option is enabled, and by default it will use HTML5's localStorage to save the state into. This callback method allows you to change where the state is saved (for example you might wish to use a server-side database or cookies).

The data given to the function is an object which has the following structure:

    "time":   {number}               // Time stamp of when the object was created
    "start":  {number}               // Display start point
    "length": {number}               // Page length
    "order":  {array}                // 2D array of column ordering information (see `order` option)
    "search": {
        "search":          {string}  // Search term
        "regex":           {boolean} // Indicate if the search term should be treated as regex or not
        "smart":           {boolean} // Flag to enable DataTables smart search
        "caseInsensitive": {boolean} // Case insensitive flag
    "columns" [
            "visible": {boolean}     // Column visibility
            "search":  {}            // Object containing column search information. Same structure as `search` above

Note that additional extensions can add extra information to this structure, or you may use stateSaveParams or stateSaveParams to add your own parameters. Also the information stored is type sensitive - that is, the data type of the data given by DataTables must be preserved. For example the start parameter must be a number data type.

This method is required only to store the data given to it. The stateSaveParams method is used to manipulate the data that is to actually be saved.

This callback works hand-in-hand with stateLoadCallback. This method saves the state while stateSaveCallback will load it from where this callback has saved it.


function stateSaveCallback( settings, data )



Save state on a server with Ajax:

$('#example').dataTable( {
  "stateSave": true,
  "stateSaveCallback": function (settings, data) {
    // Send an Ajax request to the server with the state object
    $.ajax( {
      "url": "/state_save",
      "data": data,
      "dataType": "json",
      "type": "POST",
      "success": function () {}
    } );
} );


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