当前第2页 返回上一页
aypage是内置封装好的一个对象,在进行分页的时候直接调用即可,这里主要有以下几个参数,用于配置laypage的键值对集合:
键 | 默认值 | 类型 | 描述 |
cont | 必填 | String/Object | 容器。值可以传入元素id或原生DOM或jquery对象 |
pages | 必填 | Number | 分页数 |
curr | 1 | Number | 当前页。 |
groups | 5 | Number | 连续分页数。 |
skin | default | String | 控制分页皮肤 |
first | 1 | Number/String/Boolean | 用于控制首页。first: false,则表示不显示首页项 |
last | 总页数值 | Number/String/Boolean | 用于控制尾页。last: false,则表示不显示尾页项 |
prev | 上一页 | String/Boolean | 用于控制上一页。若不显示,设置false即可 |
next | 下一页 | String/Boolean | 用于控制下一页。若不显示,设置false即可 |
jump | 核心参数 | Function | 触发分页后的回调,函数返回两个参数。
obj是一个object类型。包括了分页的所有配置信息。
first一个Boolean类,检测页面是否初始加载。非常有用,可避免无限刷新。 |
三、分页实现
在前端展示页面,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script> var pcountString= "${pcount}" ; var psizeString= "${psize}" ; var pcountInt= parseInt(pcountString);
var psizeInt=parseInt(psizeString);
var pindex = "${pindex}" ;
var ptotalpages=Math. ceil (pcountInt/psizeInt);
layui.define([ 'layer' , 'laypage' ], function (exports) { var layer = layui.layer; var laypage = layui.laypage; var pcount = pcountInt;
var psize = psizeInt;
cont : 'pagination' ,
pages : ptotalpages,
curr : pindex,
skin: '#999999' ,
jump : function (obj, first) { if (!first) { var parId=$( "#parId" ).val(); var pindex=obj.curr;
window.location.href= "${ctx}/web/rest/RecycleManage/GetFileList?parId=" +parId+ "&pindex=" +pindex;
}
});
});</script>
|
分页效果如下:
更多layui知识请关注PHP中文网layui教程栏目
以上就是使用LayUI实现前端分页功能的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
layui日期控件使用(实例)
layui表格反转的一个简单实现方式
layui的本地存储方法介绍
layui模块化与非模块化的不同引用方式介绍
采用layui的美化时保留select里面的change事件
layui时间选择框介绍
layui使用iconfont的方法介绍
layui是基于vue的吗?
layui有什么好处
layui中layer的宽高怎么自定义设置?
更多相关阅读请进入《layui》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 使用LayUI实现前端分页功能