关于layui分页组件layPage如何动态调整页数的使用

今天在修改一个项目的时候,发现里面用的居然是分页导航和表格分离的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);
	})
}

最后来张效果图😜
在这里插入图片描述

posted @ 2022-11-04 10:21  Huathy  阅读(440)  评论(0)    收藏  举报  来源