1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="callback">
<name>stateSaveCallback</name>
<summary>Callback that defines how the table state is stored and where.</summary>
<since>1.10</since>
<type type="function">
<signature>stateSaveCallback( settings, data )</signature>
<parameter type="DataTables.Settings" name="settings">
DataTables settings object
</parameter>
<parameter type="object" name="data">
Data to save. The data comes from `dt-init stateSaveParams`
</parameter>
<scope>HTML table element</scope>
</type>
<description>
DataTables can save the state of the table (paging, filtering etc) when the `dt-init 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:
```js
{
"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 `dt-init stateSaveParams` or `dt-event 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 `-type number` data type.
This method is required only to store the data given to it. The `dt-init stateSaveParams` method is used to manipulate the data that is to actually be saved.
This callback works hand-in-hand with `dt-init stateLoadCallback`. This method saves the state while `dt-init stateSaveCallback` will load it from where this callback has saved it.
</description>
<example title="Save state on a server with Ajax"><![CDATA[
$('#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 () {}
} );
}
} );
]]></example>
<related type="api">state()</related>
<related type="api">state.clear()</related>
<related type="api">state.loaded()</related>
<related type="api">state.save()</related>
<related type="option">stateSave</related>
<related type="option">stateLoadParams</related>
<related type="option">stateLoaded</related>
<related type="option">stateLoadCallback</related>
<related type="option">stateSaveParams</related>
<related type="event">stateLoaded</related>
<related type="event">stateLoadParams</related>
<related type="event">stateSaveParams</related>
</dt-option>
|
