关于 DataTables 本地储存那点事，又爱又恨 (stateSave参数应用)

1
2
3
4
5

$(document).ready(function() {
var t = $('#example').DataTable({
"stateSave": true
});
});

1
2
3

$(document).ready(function() {
var t = $('#example').DataTable();
});

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
80
11995

81
82
83
84
85
86
87
88
89
90
91

$("#example").DataTable({
//开启本地保存功能

stateSave: true,
//保存状态操作

"stateSaveParams": function (settings, data) {
console.log("stateSaveParams");

//这里可以操作保存的数据，写上自己特定的逻辑

//data.search.search = "";

},
"stateSaveCallback": function (settings, data) {
console.log("stateSaveCallback");

//DT默认保存的key值为DataTables_+表格id+页面名称

localStorage.setItem('DataTables_' + settings.sInstance, JSON.stringify(data));

// 你可以把这些数据保存在服务器上，上面的代码标识使用本地储存来存储这些数据

/**$.ajax( {
"url": "/state_save",
"data": data,
"dataType": "json",
"type": "POST",
"success": function () {}
} );
**/

},

//读取状态操作

"stateLoadParams": function (settings, data) {
console.log("stateSaveParams");

//在读取数据的时候可以改变数据，根据自己逻辑来处理

//data.search.search = "";

//或者你可以直接禁用从缓存里读取数据，只要直接返回false即可

//return false;

},
"stateLoadCallback": function (settings) {
console.log("stateLoadCallback");
return JSON.parse(localStorage.getItem('DataTables_' + settings.sInstance));

//同样你还可以从服务器取数，采用同步的方式获取到保存在服务器里的数据

/**var o;
$.ajax( {
"url": "/state_load",
"async": false,
"dataType": "json",
"success": function (json) {
o = json;
}
} );
return o;**/

},
//状态加载完后执行的回调函数

"stateLoaded": function (settings, data) {
console.log("stateLoaded");

//在这里你可以打印出保存的缓存数据

//alert( 'Saved filter was: '+data.search.search );

},
"ajax": {
"url": "/objects.txt"
},
"columns": [
{"data": "name"},
{"data": "position"},
{"data": "salary"},
{"data": "start_date"},
{"data": "office"},
{"data": "extn"}
],
"language": {
"lengthMenu": "每页_MENU_ 条记录",
"zeroRecords": "没有找到记录",
"info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
"infoEmpty": "无记录",
"search": "搜索：",
"infoFiltered": "(从 _MAX_ 条记录过滤)",
"paginate": {
"previous": "上一页",
"next": "下一页"
}
},
"dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-4'><'col-xs-6'f>r>" +
"t" +
"<'row'<'col-xs-6'i><'col-xs-6'p>>"
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
"time":   {number}               // 时间戳，状态创创建、修改的时间

"start":  {number}               // 显示起始位置

"length": {number}               // 每页显示的条数

"order":  {array}                // 二维数组，用来描述那些列按照什么要求排序

"search": {
"search":          {string}  // 搜索条件

"regex":           {boolean} // 是否支持正则表达式

"smart":           {boolean} // 是否开启了智能搜索

"caseInsensitive": {boolean} // 不区分大小写

},
"columns" [
{
"visible": {boolean}     // 列是否隐藏显示

"search":  {             // 包含每列的单独搜索条件，格式和上面的一致

"search":          {string}  // 搜索条件

"regex":           {boolean} // 是否支持正则表达式

"smart":           {boolean} // 是否开启了智能搜索

"caseInsensitive": {boolean} // 不区分大小写

}
},
……
]
}

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

{
"time": 1475739393071,
"start": 0,
"length": 10,
"order": [
[
5,
"asc"
]
],
"search": {
"search": "Developer",
"smart": true,
"regex": false,
"caseInsensitive": true
},
"columns": [
{
"visible": true,
"search": {
"search": "",
"smart": true,
"regex": false,
"caseInsensitive": true
}
},
{
"visible": true,
"search": {
"search": "",
"smart": true,
"regex": false,
"caseInsensitive": true
}
},
{
"visible": true,
"search": {
"search": "",
"smart": true,
"regex": false,
"caseInsensitive": true
}
},
{
"visible": true,
"search": {
"search": "",
"smart": true,
"regex": false,
"caseInsensitive": true
}
},
{
"visible": true,
"search": {
"search": "",
"smart": true,
"regex": false,
"caseInsensitive": true
}
},
{
"visible": true,
"search": {
"search": "",
"smart": true,
"regex": false,
"caseInsensitive": true
}
}
]
}