一：介绍
1
| 对于后台来说表格查询是很常用的，很早之前自己写分页很麻烦，jquery的datatable完美解决了这个问题。
|
二：Hui-admin中的datatable
1
2
| 用过Hui-admin的人可能会了解这个插件，系统默认集成了jQuery Datable，不过官网的文档太过于简单，还是要看Datatable的
官网，其中Hui-admin集成的datatable中clolumns不能设置，一设置就会报错，替换的方式是使用columnDefs来替代。
|
三：服务端分页
3.1 介绍
1
| 这里主要是讲一下服务端的分页，少量数据可以使用前端分页，数据量多的话就要使用后端分页来查询。
|
3.2 快速创建表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| 在你的项目中使用 DataTables，只需要引入三个文件即可，jQuery库，一个DT的核心js文件和一个DT的css文件， 完成以以下三步即可:
<!--第一步：引入Javascript / CSS （CDN）-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<!--或者下载到本地，下面有下载地址-->
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="DataTables-1.10.15/media/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="DataTables-1.10.15/media/js/jquery.dataTables.js"></script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
|
1
2
3
4
| <!--第三步：初始化Datatables-->
$(document).ready( function () {
$('#table_id_example').DataTable();
} );
|
3.3 设置服务器分页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| $("#table_id_example").dataTable({
//开启服务器模式
serverSide: true,
ajax:{
url: "../api/query-config",//接口地址
type: 'POST',
contentType: "application/json; charset=utf-8",
data: function(param){
// 请求的条件参数，这里其实可以直接返回param，这个param是
// datatable默认封装的，由于我的后端用的nutz框架，需要将param
// 转成string，后端才能接收数据
console.log(param);
return JSON.stringify(param);
}
},
columns:[
{"data":"name"},
{"data":"age"}
]
});
|
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
|
@At("/query-config")
@AdaptBy(type=JsonAdaptor.class)
public VjiDataTableResult queryConfig(JSONObject datatableParam) {
Integer pageSize = datatableParam.getInteger("length");
Integer pageNo = datatableParam.getInteger("start") + 1;
String search = datatableParam.getJSONObject("search").getString("value");
Integer draw = datatableParam.getInteger("draw");
log.info("pageSize:" + pageSize);
log.info("pageNo:" + pageNo);
log.info("search:" + search);
Pager pager = super.loadPager(pageSize, pageNo);
List<Config> list = super.configService.query(key,pager);
JSONObject rv = new JSONObject();
rv.put("total", pager.getRecordCount());
rv.put("pageNo", pager.getPageNumber());
rv.put("pageSize", pager.getPageSize());
rv.put("list", list);
log.info("rv:" + rv.toString());
return VjiDataTableResult.build(draw, pager.getRecordCount(), pager.getRecordCount(), list);
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| package com.vji.qrcode.support;
import lombok.Data;
public @Data class VjiDataTableResult {
private Integer draw;//前端传递的draw
private Integer recordsTotal;//总条数，totalNum
private Integer recordsFiltered;//总条数
private Object data;//返回的数据
//构造方法
public VjiDataTableResult(Integer draw,Integer recordsTotal,Integer recordsFiltered,Object data) {
this.draw = draw;
this.recordsTotal = recordsTotal;
this.recordsFiltered = recordsFiltered;
this.data = data;
}
public static VjiDataTableResult build(Integer draw,Integer recordsTotal,Integer recordsFiltered,Object data) {
return new VjiDataTableResult(draw, recordsTotal, recordsFiltered, data);
}
}
|
*************感谢您的阅读*************
