很多小伙伴们在使用layui的时候,发现它的表格渲染实现很简单,只需要给个接口,在后台拿数据并且使用规定的格式返回数据就行了,具体返回的json格式如下(用的是Java代码)
private int code;//状态码
private String msg;//信息
private Object data;//返回的数据
private String count;//数据条数
但是我们渲染表格数据完成之后,往往需要分页,这个时候很多小伙伴们在查看官方文档的时候,会有点看不明白,甚至大多数都是这个问题:
我草?我明明给了每页显示条数跟下拉列表参数啊,为什么他还是只显示全部的数据呢?具体代码可能是这样的:
table.render({
elem: '#currentTableId',
url: "${pageContext.request.contextPath}/admin?method=selectAllUser",
toolbar: '#toolbarDemo',
limits: [10, 20, 40, 55, 70, 85],
limit: 10,
page: {
theme: '#1E9FFF',
curr: 1,
},
skin: 'line',
method: 'post',
defaultToolbar: ['filter', 'exports', 'print', {
title: '提示',
layEvent: 'LAYTABLE_TIPS',
icon: 'layui-icon-tips'
}],
cols: [[
{type: "checkbox", width: 50},
{field: 'userId', width: 320, title: 'ID', sort: true},
{field: 'userName', width: 160, title: '用户昵称'},
{field: 'realName', width: 160, title: '用户真实姓名'},
{field: 'sex', width: 80, title: '性别'},
{field: 'address', width: 80, title: '地址', width: 100},
{field: 'phone', title: '电话号', width: 150},
{field: 'role', width: 100, title: '角色', sort: true},
{title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
]],
这个时候大家就在网上找来找去了,我也同样遇到了这个坑,不过自己也是总结出来使用的方法了
首先,一定要确定layui的json返回格式是官网上规定的,跟我这样写就行了
第二,要将参数page设置为true,代表开启分页,但是这个参数很明显 是一个bool类型的参数,官网上写的很清楚,它是可以设置为object类型的,那么我们就可以自定义其中的属性,从而达到自定义样式以及相关操作了
page | Boolean/Object | 开启分页(默认:false)。支持传入一个对象,里面可包含 laypage 组件所有支持的参数(jump、elem除外) |
第三,就是上面提到的大多数的问题
我们在后台写数据接口的时候,其实就是一个select * from table_name 拿到的是所有数据,我们只需要在前端进行分页显示就行了,我的解决办法就是直接在后台拿到所有的数据,然后再前端进行数据截取就行了
首先确保自己的放回json是标准layui所支持的类型,这个很关键
然后再进行表格渲染的时候,将page参数设置为object类型,具体参考如上图
其中将curr(当前页码)设置为1,因为如果不设置的话默认就是undetifiled,会写很多重复代码
然后最关键的点来了:
官网上给出了一个表格参数叫
parseData:function(data){ }
它可以拿到我们的返回json数据,所以说到这里就差不多明白了
我们可以定义一个变量进行数据data的返回,比如我们定义一个result,用来返回数据
parseData: function (res) {
//这个page参数,开启分页后,它的值是true的,它是一个bool类型
//当点击了分页工具的操作的时候,它就是一个对象了
/*包含以下信息,里面的curr就代表当前页码数,我们可以根据这个来自定义返回的数据是什么
//可以在page上面定义这些json值,这样好操作
*
* {elem: 'layui-table-page1', count: 13, limit: 10, limits: Array(6), groups: 3, …}
count: 13
curr: 2
elem: "layui-table-page1"
groups: 3
index: 1
jump: ƒ (e,t)
layout: (6) ['prev', 'page', 'next', 'skip', 'count', 'limit']
limit: 10
limits: (6) [10, 20, 40, 55, 70, 85]
pages: 2
*
* */
console.log(this.page.curr);
console.log(this.limit);
var result;
// if (this.page.curr) {
//(10(2-1),10*2)也就是10,20
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
// } else {
//一开始就是0-10,点击第二页的时候,curr就是2,limit还是自己定义的10,想达到分页就只需要对查询出来的数据进行划分
//对于result进行赋值,每次的值根据需要进行截取
// result = res.data.slice(0, this.limit);
// }
return {
"code": res.code, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result //解析数据列表
};
然后再其中用上刚刚所提到的截取操作,根据curr(当前页码),和limit(每页显示的数据量)进行result赋值。
比如我这里limit是10 curr起始是1 那么result就是json数据返回中data的值截取0-10之间的值,这样我们就拿到了0-10的数据,从而达到第一页面显示10条数据,当我们点击第二页的时候,curr就是2,第二页的数据就是10-20,以此类推,即可满足自己的需要啦