layui分页原文档:https://www.layui.site/doc/modules/laypage.html
文档介绍的比较简单,实际用起来我走了很多弯路:
1.count总数从接口返回,需要重新封装分页的方法(方法名flushPage)然后传值,传值回传数据总数和当前limit
complete: () => {
if(curr==1){
this.flushPage(this.countNum,limit)
}
}
2.只有在页码等于1的时候调用分页的方法,要不然导致数据出来了但是分页页码不显示;
说的比较乱,具体代码如下:
//调用接口 接口名getDataDetails
getDataDetails1: function(curr,limit) {
var postData = {
key:this.searchInput,
school:this.school,
type:this.type,
houseState:this.houseState,
userState:this.userState,
pageNumber:curr,//得到当前页
pageSize:limit,//得到每页显示的条数
}
console.log(postData);
$.ajax({
url: commonUrl + '/getDataDetails',
type: 'GET',
dataType: "json",
data: postData,
header: {
'content-type': 'application/x-www-form-urlencoded',
},
success: (data) => {
console.log(data.Result)
if (!data.isError) {
this.list = data.Result.data;
//外部定义countNum 并将接口返回总数传值
this.countNum = data.Result.count;
} else {
alert(data.Result)
}
},
error: () => {
},
complete: () => {
if(curr==1){
//调用封装的分页方法 将总数及当前每页显示多少条数据传值
this.flushPage(this.countNum,limit)
}
}
})
},
//分页
flushPage(count,limit){
//接受接口传的值
console.log(count)
layui.use('laypage', function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'demo7',//此处绑定页面中分页功能div的id <div id="demo7"> </div>
count: count,//动态取值
// limit:50,
limit:limit,//动态取值
limits:[10, 20, 30, 40, 50],
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh' ],
jump: function(obj, first){
//obj包含了当前分页的所有参数,比如:
console.log(obj);
console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first){
ve.getDataDetails1(obj.curr,obj.limit);
//页码改变时传值
}
},
theme: '#83a9f070'//自定义页码框颜色
});
});
}