基于LayUI实现前端分页功能的方法


Posted in Javascript onJuly 22, 2017

一、LayUI介绍

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

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

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

二、LayPage参数介绍

laypage是内置封装好的一个对象,在进行分页的时候直接调用即可,这里主要有以下几个参数,用于配置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=" rel="external nofollow" +parId+"&pindex="+pindex;//跳转链接
    }
   }
  });
 });
</script>

分页效果如下:

基于LayUI实现前端分页功能的方法

以上这篇基于LayUI实现前端分页功能的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
JavaScript代码复用模式实例分析
Dec 02 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
js 性能优化之快速响应的用户界面
Feb 15 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
解决node终端下运行js文件不支持ES6语法
Apr 04 Javascript
浅谈原型对象的常用开发模式
Jul 22 #Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 #jQuery
JS实现微信摇一摇原理解析
Jul 22 #Javascript
一个简易的js图片轮播效果
Jul 22 #Javascript
基于JS脚本语言的基础语法详解
Jul 22 #Javascript
JS原生轮播图的简单实现(推荐)
Jul 22 #Javascript
JS+HTML5实现图片在线预览功能
Jul 22 #Javascript
You might like
PHP 多维数组排序实现代码
2009/08/05 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
浅析PHP中的 inet_pton 网络函数
2019/12/16 PHP
jquery iframe操作详细解析
2013/11/20 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
JS实现文字掉落效果的方法
2015/05/06 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python中map和列表推导效率比较实例分析
2015/06/17 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
解决Mac下使用python的坑
2019/08/13 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
python实现广度优先搜索过程解析
2019/10/19 Python
python中的测试框架
2020/11/13 Python
CSS3使用transition属性实现过渡效果
2018/04/18 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
函授毕业生自我鉴定
2013/11/06 职场文书
毕业生自荐信
2013/12/14 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
村容村貌整治方案
2014/05/21 职场文书
出国签证在职证明范本
2014/11/24 职场文书
六一儿童节开幕词
2015/01/29 职场文书
英文导游词
2015/02/13 职场文书
人事任命书范本
2015/09/21 职场文书
送给客户微信问候语!
2019/07/04 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书