DataTables 是一款 jQuery 表格插件 主要用于分页
文档参考
配置选项：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
页面引用
<!-- DataTables css-->
<link rel="stylesheet" href="/static/assets/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<!-- DataTables js-->
<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>
使用，启用 0 配置模式 初始化DataTables
$('#dataTable').DataTable({});
分页查询前端代码 抽取后的
//分页工具
var Page=function () {
var dataTablesInit=function (formId,url,columns) {
var tables=$("#"+formId).DataTable({
// 是否开启本地分页
"paging": true,
// 是否开启本地排序
"ordering": false,
// 是否显示左下角信息
"info": true,
// 是否允许用户改变表格每页显示的记录数
"lengthChange": true,
// 是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)
"processing": true,
// 是否允许 DataTables 开启本地搜索
"searching": false,
// 是否开启服务器模式
"serverSide": true,
// 控制 DataTables 的延迟渲染，可以提高初始化的速度
"deferRender": true,
//设置每页显示数量
"aLengthMenu": [15, 25, 35, 50],
// 增加或修改通过 Ajax 提交到服务端的请求数据
"ajax": {
"url": url
},
// 分页按钮显示选项
"pagingType": "full_numbers",
// 设置列的数据源
"columns": columns ,
// 国际化
"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": ": 以降序排列此列"
}
},
// 表格重绘的回调函数 tbody表格内的所有方法都必须重绘(注意:dataTable 数据是在所有样式之后出来 有关tbody的数据 必须重绘)
"drawCallback":function (settings) {
// ICheck.init();
// SweetAlert.initSweetAlert();
}
});
//ajax请求需要传递参数时 要返回对象
return tables;
};
return{
init:function (formId,url,columns) {
return dataTablesInit(formId,url,columns)
}
}
}();
Example
<script>
var table=Page.init("tables1","/user/page",[
{
"data": function (row, type, val, meta) {
return '<input id="'+row.id+'" type="checkbox" class="icheck each">';
}
},
{"data": "id"},
{"data": "username"},
{"data": "email"},
{"data": "phone"},
{
"data": function (row, type, val, meta) {
return DateTime.format(row.updateDate,"yyyy-MM-dd HH:mm:ss");
}
},
{
"data": function (row, type, val, meta) {
return '<button class="btn btn-sm btn yellow" onclick="detail()"><i class="fa fa-search"></i> 查看</button> ' +
'<a href="/user/form?id='+ row.id +'" type="button" class="btn btn-sm btn-primary"><i class="fa fa-edit"></i> 编辑</a> ' +
'<a id="'+row.id+'" type="button" class="btn btn-sm btn-danger" onclick="ICheck.delCheck(\'/user/delete\',\''+row.id+'\')"><i class="fa fa-trash"></i> 删除</a>'
}
}
]
);
//传递ajax参数 通过查询点击事件获取数据
function search() {
var username = $("#username").val();
var email = $("#email").val();
var phone = $("#phone").val();
var params = {
"username": username,
"email": email,
"phone": phone
};
table.settings()[0].ajax.data = params;
table.ajax.reload();
}
//查找所有
function searchAll() {
var obj={};
table.settings()[0].ajax.data =obj;
table.ajax.reload();
}
</script>
分页查询服务端代码
服务端接收ajax代码 Controller
/**
* dataTables分页 ajax 请求
* draw 确保Ajax从服务器返回的是对应的 必须int
* start 起始位置
* length 每页显示数
* entity 模糊查询时需要查询的条件
* 服务器返回数据时
* 确保Ajax从服务器返回的是对应的 draw
* 需要返回的数据 data
* 数据库里总共记录数 recordsTotal
* 过滤后的记录数 recordsFiltered
* 可选 定义一个错误来描述服务器出了问题后的友好提示 error
* @return map
*/
@ResponseBody
@GetMapping(value = "/page") //get 请求查询 保证幂等性
public PageInfo<T> page(int draw, int start, int length ,T entity){
PageInfo pageInfo = service.page(entity,start,length,draw);
return pageInfo;
}
分页类 PageInfo
package com.funtl.my.shop.admin.dto;
import com.funtl.my.shop.admin.abstracts.AbstractBaseEntity;
import lombok.Data;
import java.util.List;
/**
* 数据传输对象包下 用来保存分页ajax请求后返回的数据
* @param <T>
*/
@Data
public class PageInfo<T extends AbstractBaseEntity>{
/**
* 保证返回的数据到同一请求
*/
private int draw;
/**
* 分页的总数
*/
private int recordsTotal;
/**
* 过滤后的分页总数
*/
private int recordsFiltered;
/**
* 保存数据的集合
*/
private List<T> data;
/**
* 错误提示信息(可选)
*/
private String error;
}
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" />
FROM
tb_user AS a LIMIT #{page}, #{pageSize}
</select>
数据访问接口
/**
* 分页
* @param params 需要2参数 start/数据的起始位置 length/每页的数据数
* 如需模糊查询 则还需要entity对象传入参数给mapper
* @return
*/
public List<T> page(Map<String,Object> params);
/**查询总条数
* @param entity 模糊查询时的对象
* @return
*/
public int count(T entity);
业务层接口
/**
* 分页 entity/模糊查询传递参数 start/数据其实位置 length/每页数据数 draw/保证请求是同一次
* @param entity
* @param start
* @param length
* @param draw
* @return
*/
public PageInfo page(T entity, int start, int length, int draw);
业务实现层
/**
* 分页 entity/模糊查询传递参数 start/数据其实位置 length/每页数据数 draw/保证请求是同一次
* @param entity
* @param start
* @param length
* @param draw
* @return
*/
@Override
public PageInfo page(T entity, int start, int length, int draw) {
Map<String,Object> map= Maps.newHashMap();
map.put("start",start);
map.put("length",length);
map.put(StringUtils.toLowerCaseFirstOne(entity.getClass().getSimpleName()),entity);
//获取分页的数据
List list = mapper.page(map);
//获取总数据数
int count=mapper.count(entity);
//设置分页对象
PageInfo pageInfo=new PageInfo();
pageInfo.setDraw(draw);
pageInfo.setData(list);
pageInfo.setRecordsTotal(count);
pageInfo.setRecordsFiltered(count);
return pageInfo;
}
网友评论