ssm+layui实现layui的数据表格的内置分页功能，效果如上图。
前端JS代码(进行渲染)：
<script>
table.render({
elem: '#test'
, url: '/blog/getCategory'
, cols: [[{field: 'id', title: 'ID', templet: '#index', width: 40}
, {field: 'leibie', title: '类别'}
, {field: 'time', title: '创建时间'}
, {field: 'annotation', title: '备注'}
, {field: 'delete', title: '操作', toolbar: '#barDemo', align: 'center'}
]]
, parseData: function (res) { //res 即为原始返回的数据
console.log("成功"+res.status+";=="+res.message+";"+res.total);
return {
"code": res.status, //解析接口状态
"msg": res.message, //解析提示文本
"count": res.total, //解析数据长度
"data": res.data //解析数据列表
};
}
, page:true
,limit:20
,limits:[5,10,20,30]
});
</script>思路讲解及踩坑：
在你的table数据表格渲染成功，且打开了page后（就是page：true）。接下来要开始对分页模块里面的参数进行设置了，但是在数据表格内打开的分页与单独的分页模块laypage有些不同。
如上图，当你一开始渲染成功是，显示的分页效果是这样的，不能跳转其他页码，计算总条数也是显示为“共0条”，是静态的分页效果。一开始我是懵的，不知道怎么去设置这里，让它变成动态的。
这个时候你需要打开官方文档，你可以看到有个parseData的函数，它是“数据格式解析的回调函数，用于将返回的任意数据格式解析成 table 组件规定的数据格式”。什么意思呢？在你前面进行数据表格进行渲染时，js会根据你的url地址发起请求（如下图所示），并返回后台传过来的数据，然后对这个数据进行解析。
发起请求，res就是返回数据。我返回的数据格式如下图，可以看到，这个函数把res里面的对应数据赋给了“code”,"msg","count","data"四个变量。code代表了返回状态，必须为0，count就是你的数据总条数，我这里就是总共有多少种分类，data在我这里就代表了每个条目里面的数据。当这些值返回以后，分页自然就变成动态的了。
下面说下，后台是怎么实现返回数据的：
事实上，当你的数据表格渲染的时候，自发送的请求自动回带上两个参数page（代表当前是第几页）和limit（该页只能展示多少条数据），如下图
在controller层接收这两个参数，如下图。这里我在下图第三个红框里面的操作，是为了根据每一次的请求的page和size来返回相应的数据（比如page= 2，size= 10，就是说你要在第二页展示10条数据，所以返回数据应该是在数据库中的第10——19条）
接下来我创建了一个类，用来存储需要返回的数据，代码如下
public class ResultMap<T> {
private int status;
private String message;
private int total;
private T data;
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
@Override
public String toString() {
return "ResultMap{" +
"status=" + status +
", message='" + message + '\'' +
", total=" + total +
", data=" + data +
'}';
}
public ResultMap(){
}
public ResultMap(int status,String message,int total,T data){
this.status = status;
this.message = message;
this.total = total;
this.data = data;
}
}
将你查询到的数据存到上面这个勒种，再返回给前端即可。
写的有不足之处，还请各位指正。
补充其它层代码：
service层：
impl:
mapper
mapper.xml
