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
|
<?xml version="1.0" encoding="UTF-8" ?>
<dt-option group="feature">
<name>stateSave</name>
<summary>State saving - restore table state on page reload</summary>
<since>1.10</since>
<type type="boolean" />
<default value="false" />
<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 `dt-init 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 `dt-init stateSaveCallback` and `dt-init stateLoadCallback` options.
</description>
<example title="Enable state saving"><![CDATA[
$('#example').dataTable( {
stateSave: true
} );
]]></example>
<example title="Enable state saving and override state save/load handlers to use only the table's DOM id"><![CDATA[
$('#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 ) )
}
} );
]]></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">stateSaveCallback</related>
<related type="option">stateDuration</related>
<related type="option">stateLoadCallback</related>
<related type="option">stateLoadParams</related>
<related type="option">stateLoaded</related>
<related type="option">stateSaveParams</related>
<related type="event">stateLoaded</related>
<related type="event">stateLoadParams</related>
<related type="event">stateSaveParams</related>
</dt-option>
|
