dataTables--ajax 分页基本使用

dataTables是一款很强大很好用的前端table 分页插件,地址:dataTables

如何使用大家可以去官网看看教程,此处总结下dataTables结合ajax需要注意的点

一,开始使用

JavaScript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "数据url",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );

json数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
},
]
}

数据格式必须一致,data作为key,值为数组对象,获取对象属性值能够直接使用data.属性名来调用获取。

如果不能使用data.属性名来直接调用获取值则需要使用dataSrc来动态指向数据源。

JavaScript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "数据url",
"dataSrc": "data.records",
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );

json数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
"data": {
"records": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
},
]
}

二,服务器处理(Server-side processing)

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
"processing": true,
"serverSide": true,
ajax(data, callback, settings) {
console.log(data);
//封装请求参数
var param = {};
param.pageSize = data.length; //页面显示记录条数,在页面显示每页显示多少项的时候
param.pageIndex = data.start + 1; //开始的记录序号
console.log(param);
$.ajax({
type: 'get',
url: 'http://192.168:8766/User/list',
cache: false, //禁用缓存
data: param,
dataType: 'json',
success: function(res) {
setTimeout( function () {
var out = {};
out.draw = data.draw;
out.recordsTotal = res.data.count;
out.recordsFiltered = res.data.count;
out.data = res.data.records;
callback( out );
}, 50 );
},
error() {
alert('error');
}
})
},
"bLengthChange": false, //关闭选择显示条数
"bSort": false, //不能排序
"iDisplayLength": 10,
"pagingType": "full_numbers",
"language": {
"bProcessing": "正在加载中......",
"sZeroRecords": "没有检索到数据",
"info": "显示 _START_ 至 _END_ 条记录,共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"oPaginate" : {
"sFirst" : "首页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "末页"
},
},
"columns": [
{
data: 'UserId',
render(data, type, full, meta) {
return `
<input type="checkbox" class="checkchild" value="${data}" />
<img class="check-img" src="../assets/img/backstage_icon_cheakbox_default.png" alt="">
`
}
},
{data : "Account"},
{data : "RealName"},
{data : "Email"},
{data : "DepartmentId"},
{data : "UserId"},
{data : "WorkGroupId"},
{data : "IsManager"},
{data : "Mobile"},
{
data : "CreateDate",
},
{
render(data, type, full, meta) {
return `
<div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-xs">
<button class="am-btn am-btn-bg-white am-btn-xs am-text-secondary edit"><span class="am-icon-pencil-square-o"></span>编辑</button>
<button class="am-btn am-btn-bg-white am-btn-xs am-text-danger am-hide-sm-only del"><span class="am-icon-copy"></span> 删除</button>
<button class="am-btn am-btn-bg-white am-btn-xs am-text-warning am-hide-sm-only authorize"><span class="am-icon-trash-o"></span> 授权</button>
</div>
</div>`
}
}
]
1
2
param.pageSize = data.length;       //页面显示记录条数,在页面显示每页显示多少项的时候
param.pageIndex = data.start + 1; //开始的记录序号
  • pageSize:为后台数据,每页有多少条数据
  • pageIndex:页面索引

因为data.start默认值为0,所以加一表示第一页开始

记录自己踩过的坑