DataTables 简介
DataTables 是一款 jQuery 表格插件。它是一个高度灵活的工具，可以将任何 HTML 表格添加高级的交互功能。
DataTables 中文网
- 中文网站：http://www.datatables.club/
- 实例索引：http://www.datatables.club/example/
- 参考手册：http://www.datatables.club/manual/
- 帮助文档：http://www.datatables.club/reference/
页面引用
CSS 部分
<!-- DataTables -->
<link rel="stylesheet" href="/static/assets/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
JS 部分
<!-- DataTables -->
<script src="/static/assets/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
分页查询案例
服务端
Mybatis 映射文件关键代码
DataTables 分页需要提供查询数据的总笔数，以下为查询总笔数的关键代码：
<select id="count" resultType="java.lang.Integer">SELECT COUNT(*) FROM tb_user
</select>
这里我们使用 MySQL 作为数据库，由于需要传入分页参数，这里我们还使用了 Map 作为查询参数类型，以下为 MySQL 分页查询的关键代码：
<select id="page" resultType="TbUser" parameterType="java.util.Map">SELECT<include refid="tbUserColumns" />FROMtb_user AS a LIMIT #{page}, #{pageSize}
</select>
定义数据访问接口
/*** 分页查询* @param params* @return*/
List<TbUser> page(Map<String, Object> params);/*** 查询笔数* @return*/
int count();
定义通用的分页展示对象
创建一个名为 PageInfo 的分页数据展示对象，代码如下：
package com.yyh.commons.dto;import com.yyh.commons.persistence.BaseEntity;import java.io.Serializable;
import java.util.List;/*** 分页展示对象* <p>Title: PageInfo</p>* <p>Description: </p>** @author Yuu* @version 1.0.0* @date 2018/6/21 5:17*/
public class PageInfo<T extends BaseEntity> implements Serializable {private int draw;private int recordsTotal;private int recordsFiltered;private List<T> data;private String error;public int getDraw() {return draw;}public void setDraw(int draw) {this.draw = draw;}public int getRecordsTotal() {return recordsTotal;}public void setRecordsTotal(int recordsTotal) {this.recordsTotal = recordsTotal;}public int getRecordsFiltered() {return recordsFiltered;}public void setRecordsFiltered(int recordsFiltered) {this.recordsFiltered = recordsFiltered;}public List<T> getData() {return data;}public void setData(List<T> data) {this.data = data;}public String getError() {return error;}public void setError(String error) {this.error = error;}
}
业务逻辑层关键代码
@Override
public PageInfo<TbUser> page(Map<String, Object> params) {PageInfo<TbUser> pageInfo = new PageInfo<>();int count = tbUserDao.count();List<TbUser> tbUsers = tbUserDao.page(params);pageInfo.setRecordsTotal(count);pageInfo.setRecordsFiltered(count);pageInfo.setData(tbUsers);return pageInfo;
}
控制器关键代码
/*** 分页查询** @param request* @return*/
@ResponseBody
@RequestMapping(value = "page", method = RequestMethod.GET)
public PageInfo<TbUser> page(HttpServletRequest request) {String draw = request.getParameter("draw");int start = Integer.parseInt(request.getParameter("start"));int length = Integer.parseInt(request.getParameter("length"));Map<String, Object> params = new HashMap<>();params.put("page", start);params.put("pageSize", length);PageInfo<TbUser> pageInfo = tbUserService.page(params);pageInfo.setDraw(draw == null ? 0 : Integer.parseInt(draw));return pageInfo;
}
客户端
使用 DataTables 分页功能，需要开启一些列的相关配置，分页的数据结果是由 Ajax 请求获取并解析 JSON 格式数据自动封装进表格的，代码如下：
$("#dataTable").DataTable({// 是否开启本地分页"paging": true,// 是否开启本地排序"ordering": false,// 是否显示左下角信息"info": true,// 是否允许用户改变表格每页显示的记录数"lengthChange": false,// 是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)"processing": true,// 是否允许 DataTables 开启本地搜索"searching": false,// 是否开启服务器模式"serverSide": true,// 控制 DataTables 的延迟渲染，可以提高初始化的速度"deferRender": true,// 增加或修改通过 Ajax 提交到服务端的请求数据"ajax": {"url": "/user/page"},// 分页按钮显示选项"pagingType": "full_numbers",// 设置列的数据源"columns": [{"data": function (row, type, val, meta) {return '<input id="' + row.id + '" type="checkbox" class="minimal" />';}},{"data": "id"},{"data": "username"},{"data": "phone"},{"data": "email"},{"data": "updated"},{"data": function (row, type, val, meta) {return '<a href="#" type="button" class="btn btn-sm btn-default"><i class="fa fa-search"></i> 查看</a> ' +'<a href="#" type="button" class="btn btn-sm btn-primary"><i class="fa fa-edit"></i> 编辑</a> ' +'<a href="#" type="button" class="btn btn-sm btn-danger"><i class="fa fa-trash-o"></i> 删除</a>'}}],// 表格重绘的回调函数"drawCallback": function (settings) {App.initCheckbox();},// 国际化"language": {"sProcessing": "处理中...","sLengthMenu": "显示 _MENU_ 项结果","sZeroRecords": "没有匹配结果","sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项","sInfoEmpty": "显示第 0 至 0 项结果，共 0 项","sInfoFiltered": "(由 _MAX_ 项结果过滤)","sInfoPostFix": "","sSearch": "搜索:","sUrl": "","sEmptyTable": "表中数据为空","sLoadingRecords": "载入中...","sInfoThousands": ",","oPaginate": {"sFirst": "首页","sPrevious": "上页","sNext": "下页","sLast": "末页"},"oAria": {"sSortAscending": ": 以升序排列此列","sSortDescending": ": 以降序排列此列"}}
})
参考以下文档完成
- 配置选项：http://www.datatables.club/reference/option/
- 服务器处理：http://www.datatables.club/manual/server-side.html
- 设置列的数据源：https://datatables.net/reference/option/columns.data
- 国际化：http://www.datatables.club/manual/i18n.html