今天在修改一个项目的时候,发现里面用的居然是分页导航和表格分离的laypage,layui中的table。而我之前都是一起使用的layui封装好的。好了,那么今天来说一说,laypage如何动态调整页数。
首先,这是简单的分页组件的写法写出来,请且,这时候始终都只有一页。
layui.use(['laypage', 'layer'], function(){
laypage = layui.laypage
,layer = layui.layer;
laypage.render({
elem: 'demo2' //渲染的对象
,count: 1 //注意这里的count是数据条数
,limit: 8 //每页显示8条数据
,theme: '#1E9FFF'
});
});
现在,进行方法封装,来动态的刷新总页数。
function flushPage(num,curr){
layui.use(['laypage', 'layer'], function(){
laypage = layui.laypage
,layer = layui.layer;
laypage.render({
elem: 'demo2' //渲染的对象
,count: 1 //注意这里的count是数据条数
,limit: 8 //每页显示8条数据
,curr : curr //当前高亮页
,theme: '#1E9FFF'
,jump: function (obj, first) { //obj为当前页的属性和方法,第一次加载first为true
//do SomeThing
if (!first) { //非首次加载
console.log(obj.curr);
getSongByPage(obj.curr); //执行跳页方法,刷新显示内容,然后再在跳页方法中调用该方法,来改变总页数
//注意这里的总页数是,layui自己给我们算出来的,我们需要提供后台返回的总记录数,以及一页显示记录条数
}
}
});
});
}
页面刷新 与 从后端获取总记录数的方法
function getSongByPage(page){
if(page <= 0){
page=1;
}
$.post("song/getSongByPage",{
page: page,
},function(data){
var songNum = data.count; //取出总记录数
flushPage(songNum,page); //刷新页码
//此处因篇幅,省略表格渲染逻辑部分
}
$("#songList").html(content);
})
}
最后来张效果图😜