jQuery Datatables
DataTables 是一款 jQuery 表格插件。它是一個(gè)高度靈活的工具，可以將任何HTML表格添加高級(jí)的交互功能。
- 中文網(wǎng)站：http://www.datatables.club/
- 實(shí)例索引：http://www.datatables.club/example/
- 參考手冊(cè)：http://www.datatables.club/manual/
- 幫助文檔：http://www.datatables.club/reference/
頁(yè)面引用
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>
使用，啟動(dòng)0模式
$('#dataTable').DataTable();
分頁(yè)查詢的案例
服務(wù)端
Mybatis映射文件關(guān)鍵代碼
DataTables 分頁(yè)需要提供查詢數(shù)據(jù)的總筆數(shù)，以下為查詢總筆數(shù)的關(guān)鍵代碼：
<!--查詢總記錄數(shù)-->
<select id="count" resultType="java.lang.Integer">
select count(*) from tb_user
</select>
這里我們使用 MySQL 作為數(shù)據(jù)庫(kù)，由于需要傳入分頁(yè)參數(shù)，這里我們還使用了 Map 作為查詢參數(shù)類型，以下為 MySQL 分頁(yè)查詢的關(guān)鍵代碼：
<!--分頁(yè)查詢-->
<select id="page" resultType="TbUser" parameterType="java.util.Map">
SELECT
<include refid="tbUserColumns"/>
FROM
tb_user AS a LIMIT #{start},#{length}
</select>
定義數(shù)據(jù)訪問接口
/*
* @Author: 小小熒
* @Description:分頁(yè)查詢，參數(shù)代表的是分頁(yè)起始頁(yè)碼，和每頁(yè)的數(shù)
* @Date: 2019/7/4
* @time: 21:56
* @param: []
* @return: java.util.List<top.xxytime.my.shop.domain.TbUser>
*/
public List<TbUser> page(Map<String, Object> params);
/**
* @Author: 小小熒
* @Description: 查詢總記錄數(shù)
* @Date: 2019/7/5
* @time: 17:56
* @param: []
* @return: int
*/
public int count();
定義一個(gè)通用的分頁(yè)展示對(duì)象
創(chuàng)建一個(gè)名為 PageInfo 的分頁(yè)數(shù)據(jù)展示對(duì)象，代碼如下：
import com.funtl.my.shop.commons.persistence.BaseEntity;
import java.io.Serializable;
import java.util.List;
/**
* 分頁(yè)展示對(duì)象
* <p>Title: PageInfo</p>
* <p>Description: </p>
*
* @author Lusifer
* @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;
}
}
業(yè)務(wù)關(guān)鍵層邏輯代碼
@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;
}
控制層關(guān)鍵代碼
/**
* 分頁(yè)查詢
*
* @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 分頁(yè)功能，需要開啟一些列的相關(guān)配置，分頁(yè)的數(shù)據(jù)結(jié)果是由 Ajax 請(qǐng)求獲取并解析 JSON 格式數(shù)據(jù)自動(dòng)封裝進(jìn)表格的，代碼如下：
$("#dataTable").DataTable({
// 是否開啟本地分頁(yè)
"paging": true,
// 是否開啟本地排序
"ordering": false,
// 是否顯示左下角信息
"info": true,
// 是否允許用戶改變表格每頁(yè)顯示的記錄數(shù)
"lengthChange": false,
// 是否顯示處理狀態(tài)(排序的時(shí)候，數(shù)據(jù)很多耗費(fèi)時(shí)間長(zhǎng)的話，也會(huì)顯示這個(gè))
"processing": true,
// 是否允許 DataTables 開啟本地搜索
"searching": false,
// 是否開啟服務(wù)器模式
"serverSide": true,
// 控制 DataTables 的延遲渲染，可以提高初始化的速度
"deferRender": true,
// 增加或修改通過 Ajax 提交到服務(wù)端的請(qǐng)求數(shù)據(jù)
"ajax": {
"url": "/user/page"
},
// 分頁(yè)按鈕顯示選項(xiàng)
"pagingType": "full_numbers",
// 設(shè)置列的數(shù)據(jù)源
"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>'
}
}
],
// 表格重繪的回調(diào)函數(shù)
"drawCallback": function (settings) {
App.initCheckbox();
},
// 國(guó)際化
"language": {
"sProcessing": "處理中...",
"sLengthMenu": "顯示 _MENU_ 項(xiàng)結(jié)果",
"sZeroRecords": "沒有匹配結(jié)果",
"sInfo": "顯示第 _START_ 至 _END_ 項(xiàng)結(jié)果，共 _TOTAL_ 項(xiàng)",
"sInfoEmpty": "顯示第 0 至 0 項(xiàng)結(jié)果，共 0 項(xiàng)",
"sInfoFiltered": "(由 _MAX_ 項(xiàng)結(jié)果過濾)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中數(shù)據(jù)為空",
"sLoadingRecords": "載入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首頁(yè)",
"sPrevious": "上頁(yè)",
"sNext": "下頁(yè)",
"sLast": "末頁(yè)"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
})
實(shí)現(xiàn)效果截圖
image
參考以下文檔完成
- 配置選項(xiàng)：http://www.datatables.club/reference/option/
- 服務(wù)器處理：http://www.datatables.club/manual/server-side.html
- 設(shè)置列的數(shù)據(jù)源：https://datatables.net/reference/option/columns.data
- 國(guó)際化：http://www.datatables.club/manual/i18n.html
