今天在修改一个项目的时候,发现里面用的居然是分页导航和表格分离的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 SomeThingif (!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);})}
最后来张效果图😜