stateSaveCallback

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

Description

DataTables saves the state of the table (paging, filtering etc) and by default it will use HTML5's localStorage to save the state into. When the stateSave option is enabled, 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.

Type

Example

new DataTable('#myTable', {
	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 () {}
		});
	}
});

Related

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