jQuery DataTables 插件
简介
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
特性：
- 分页，即时搜索和排序
- 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
- 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
- 各式各样的扩展: Editor, TableTools, FixedColumns ……
- 丰富多样的option和强大的API
- 支持国际化
- 超过2900+个单元测试
- 免费开源 （ MIT license ）！ 商业支持
- 更多特性请到官网查看
配置
html 配置模板
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入dataTables插件默认样式，如果使用了主题样式，就不需要引入默认样式了 -->
<!-- <link href="https://cdn.bootcss.com/datatables/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"> -->
<!-- 引入bootstrap主题css -->
<link href="https://cdn.bootcss.com/datatables/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet">
<!-- 引入jQuery依赖 -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 引入dataTables 插件 -->
<script src="https://cdn.bootcss.com/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<!-- 引入bootstrap主题js -->
<script src="https://cdn.bootcss.com/datatables/1.10.15/js/dataTables.bootstrap.js"></script>
<!-- 定义一个普通的table元素 -->
<table id="dtTable" class="table table-striped"></table>
<script type="text/javascript">
/**
* 根据个人经验总结的工作中常用的配置，能够满足多数情况。
**/
var $dtTable = $("#dtTable").DataTable({
serverSide: true, // 开启服务端处理
stateSave: false, // 关闭状态保存
dom: '<"row" <"col-md-12" t>><"row" <"col-md-6" i><"col-md-6" p>>',
pageLength: 10, // 每页容量
ordering: true, // 是否开启排序，默认true
// 延迟请求加载服务端的数据，直到表格第二次绘制 (http://www.datatables.club/reference/option/deferLoading.html)
// 如果不配置的话，datatables会在初始化时去加载数据，此时整个页面可能尚未全部加载完，某些场景下可能会出现异常。
deferLoading: 0,
ajax: function (params, callback, obj) {
var reqParams = {
draw: params.draw,
length: params.length,
start: params.start,
orderField: params.columns[params.order[0].column].name, // 排序字段
orderDir: params.order[0].dir // 排序方向
}
// 如果需要其它查询参数的，请附加在reqParams中。
$.post("/example/datatables/ajax.htm", reqParams, function(res, status, xhr) {
if (res.success) {
callback(res);
} else {
callback({
data: [],
draw: params.draw,
recordsFiltered: 0,
recordsTotal: 0
});
alert(res.message);
}
}, 'json');
},
order: [
[0, 'desc']
],
// 列绑定，通过data和数据里的属性绑定
columns: [
{name: "id", data: "id", title: "id"},
{name: "name", data: "name", title: "姓名", orderable: false},
{
name: "sex", data: "sex", title: "性别",
render: function(data, type, row, meta) {
// 如果未指定 “ data: 'sex' ”，这里的data参数将会是 undefined
// row：服务端返回的行数据
// meta：{col: "列号，从0开始", row: "行号，从0开始", settings: "datatables配置"}
if (data == "MAN") {
return "男";
} else if (data == "WOMAN") {
return "女";
} else {
return "太监";
}
}
},
{
title: "操作",
orderable: false,
render: function(data, type, row, meta) {
return '<button class="btn btn-sm btn-success js-update-btn">编辑</button>' +
' <button class="btn btn-sm btn-warning js-delete-btn">删除</button>';
}
}
],
language: {
sEmptyTable: "暂无数据...",
sInfo: "_START_ 到 _END_, 总共 _TOTAL_ 条记录",
sInfoEmpty: "0 到 0 总共 0 条记录",
sInfoFiltered: "(总共 _MAX_ 条记录)",
sInfoPostFix: "",
sInfoThousands: ".",
sLengthMenu: "_MENU_ 条 / 每页",
sLoadingRecords: "正在加载中...",
sProcessing: "正在加载中...",
sSearch: "搜索",
sZeroRecords: "未找到任何相关记录.",
oPaginate: {
sFirst: "首页",
sPrevious: "上一页",
sNext: "下一页",
sLast: "最后一页"
}
},
initComplete: function(settings, json) {
// 表格初始化完成时回调
console.log( 'DataTables has finished its initialisation.' );
},
drawCallback: function(settings){
// 表格绘制完成时回调
console.log("draw finish");
}
});
$("#dtTable").on("click", ".js-update-btn", function(){
var tr = $(this).parent().parent();
var row = $dtTable.row(tr); // 获取行数据
console.log(row);
});
// 如果配置了 deferLoading，这里需要根据需要手动加载一次数据。
$dtTable.draw();//手动渲染数据
</script>
java 请求实体，这里只是简单封装了分页和排序参数。
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/**
* jQuery DataTables 插件请求实体
*
* @see <a href="https://datatables.net/">DataTables</a>
*/
public class DTRequest {
/**
* 重绘次数（插件标准字段）
*/
private Integer draw;
/**
* 数据起始位置，从0开始（插件标准字段）
*/
private Integer start;
/**
* 需要的数据条数，即每页容量（插件标准字段）
*/
private Integer length;
private String orderField; // 排序字段
private String orderDir; // 排序方向：'asc'、'desc'
public Integer getDraw() {
return draw;
}
public void setDraw(Integer draw) {
this.draw = draw;
}
public Integer getStart() {
return start;
}
public void setStart(Integer start) {
this.start = start;
}
public Integer getLength() {
return length;
}
public void setLength(Integer length) {
this.length = length;
}
public String getOrderField() {
return orderField;
}
public void setOrderField(String orderField) {
this.orderField = orderField;
}
public String getOrderDir() {
return orderDir;
}
public void setOrderDir(String orderDir) {
this.orderDir = orderDir;
}
}
java 响应实体，这里多封装了success和message字段，用于判断请求是否成功，以及错误message，以提升用户体验。标注插件标准字段的是插件必须的字段，不能为空。
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96/**
* jQuery DataTables 插件响应实体
*
* @see <a href="https://datatables.net/">DataTables</a>
*/
public class DTResponse<T> {
private boolean success;
private String message;
/**
* 数据（插件标准字段）。
*/
private List<T> data;
/**
* 重绘次数（插件标准字段）。该值来自于 {@link DTRequest#draw }
*/
private Integer draw;
/**
* 总记录数（插件标准字段）
*/
private Integer recordsTotal;
/**
* 筛选到的记录数（插件标准字段）
*/
private Integer recordsFiltered;
public DTResponse() {
}
public DTResponse(List<T> data, Integer draw, Integer recordsFiltered) {
this.success = true;
this.data = data;
this.recordsFiltered = recordsFiltered;
this.recordsTotal = recordsFiltered;
}
public DTResponse(List<T> data, Integer draw, Integer recordsFiltered, Integer recordsTotal) {
this.success = true;
this.data = data;
this.recordsFiltered = recordsFiltered;
this.recordsTotal = recordsTotal;
}
public boolean isSuccess() {
return success;
}
public void setSuccess(boolean success) {
this.success = success;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public List<T> getData() {
return data;
}
public void setData(List<T> data) {
this.data = data;
}
public Integer getDraw() {
return draw;
}
public void setDraw(Integer draw) {
this.draw = draw;
}
public Integer getRecordsTotal() {
return recordsTotal;
}
public void setRecordsTotal(Integer recordsTotal) {
this.recordsTotal = recordsTotal;
}
public Integer getRecordsFiltered() {
return recordsFiltered;
}
public void setRecordsFiltered(Integer recordsFiltered) {
this.recordsFiltered = recordsFiltered;
}
}