关于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);
	})
}

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Huathy-雨落江南,浮生若梦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值