使用LayUI实现前端分页功能

码农天地 - 2020-06-21 20:44:37

---

一、LayUI介绍

Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。内置了一些常用元素和组件的UI框架。

下载地址为http://www.layui.com/，下载后引入项目中。

<link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui/css/layui.css"><script src="${pageContext.request.contextPath}/js/layui.js" ></script>

二、LayPage参数介绍

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类，检测页面是否初始加载。非常有用，可避免无限刷新。

三、分页实现在前端展示页面，代码如下：<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;// 每一页的记录数 // 分页 laypage({ cont : 'pagination', // 页面上的id 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实现前端分页功能的详细内容，更多请关注php中文网其它相关文章！

微信分享相关标签：LayUI本文转载于：博客园，如有侵犯，请联系a@php.cn删除上一篇：Layui连接mysql操作CRUD下一篇：layui中动态设置checkbox选中状态的方法介绍

相关文章

相关视频

layui实现点击按钮添加一行的方法layui时间控件选择时间基于layui实现select区域联动layui弹出层闪退解决使用LayUI实现前端分页功能管理员页面布局（layui表格）菜单管理页面（layui表格+表单）简述layui文件上传及课程小结

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论立即提交专题推荐独孤九贱-php全栈开发教程

全栈 100W+

主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

玉女心经-web前端开发教程

入门 50W+

主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

天龙八部-实战开发教程

实战 80W+

主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

尚

认证0级讲师

最近文章增加redis命令的方法520SpringBoot整合Redis缓存的方法介绍693layui中动态设置checkbox选中状态的方法介绍1001发布技术文章最新文章热门排行

layui中动态设置checkbox选中状态的方法介绍使用LayUI实现前端分页功能Layui连接mysql操作CRUDlayui弹出层闪退解决基于layui实现select区域联动layui实现登录功能的方法layui时间控件选择时间详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏

layui框架的优点和缺点是什么layui如何使用按钮事件layui列表怎么取input框的值layui怎么用layui导入导出Excel方法layui标签输入框inputTags介绍Layui时间选择框介绍layui表格怎么把表头固定推荐视频教程layUI前端框架使用详解前端UI框架 — layui视频教程分类php视频教程html视频教程css视频教程JS视频教程jQuery视频教程mysql视频教程Linux视频教程Python视频教程article_status = 469925;网站首页 PHP视频PHP实战PHP代码PHP手册词条手记编程词典

php中文网：公益在线php培训，帮助PHP学习者快速成长！ 合肥彼岸互联信息技术有限公司

Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 皖公网安备 34010402701654号 关于我们免责申明赞助与捐赠广告合作

座机号码：0551-64933227  安徽省合肥市政务新区置地广场D座2101

  var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?8cc45d54c337ca616c34b1cf747da91c";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();$('.content').viewer();

Tags 标签