一、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参数介绍

  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="+parId+"&pindex="+pindex;//跳转链接
}
}
});
});
</script>

  分页效果如下:  

  

基于layUI实现前端分页功能的更多相关文章

  1. php基于SQLite实现的分页功能示例

    php基于SQLite实现的分页功能. 这里操作数据库文件使用的是前面文章<PHP基于PDO实现的SQLite操作类>中的SQLite数据库操作类. 代码: <?php class ...

  2. python2.0_day19_前端分页功能的实现

    我们前面完成的客户纪录展示,只有4条,如果有上百条就不能在1页中全部展示了,那样是不人性化的.另外一次性取出来,数据量也比较大.假如现在有95条数据,我们想实现一个每页展示20条,那就分为5页.假如我 ...

  3. 使用原生js实现前端分页功能

    背景: 从后台提取出来数据,在前端进行分页. 代码: user-manage.js window.onload = function(){ var result = { message : " ...

  4. 前端分页功能实现(PC)

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>加 ...

  5. Mybatis Generator实现分页功能

    Mybatis Generator实现分页功能 分类: IBATIS2013-07-17 17:03 882人阅读 评论(1) 收藏 举报 mybatisibatisgeneratorpage分页 众 ...

  6. Mybatis分页-利用Mybatis Generator插件生成基于数据库方言的分页语句,统计记录总数 (转)

    众所周知,Mybatis本身没有提供基于数据库方言的分页功能,而是基于JDBC的游标分页,很容易出现性能问题.网上有很多分页的解决方案,不外乎是基于Mybatis本机的插件机制,通过拦截Sql做分页. ...

  7. poscms基于list标签实现的查询分页功能

    poscms系统本身有一个在查询页(search页面)实现的查询分页功能,基于系统封装的php函数dr_search_url() 但是今天的需求除了导航栏.列表页.详情页都实现查询功能外,关键是有两个 ...

  8. Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能

    Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...

  9. 基于SSM框架的简易的分页功能——包含maven项目的搭建

    新人第一次发帖,有什么不对的地方请多多指教~~ 分页这个功能经常会被使用到,我之前学习的时候找了很多资源,可都看不懂(笨死算了),最后还是在朋友帮助下做出了这个分页.我现在把我所能想到的知识 做了一个 ...

随机推荐

  1. 用java实现简单快速的webservice客户端/数据采集器(支持soap1.1和soap1.2标准,支持utf-8编码)

    前言: 用了cxf,axis等各种wbeservice实现库,简单试用了一下动态调用的方式,很不满意,完全无法满足业务的需要,所以自己实现了一个webservice采集客户端,方便动态调用外部webs ...

  2. 关于数据库优化1——关于count(1),count(*),和count(列名)的区别,和关于表中字段顺序的问题

    1.关于count(1),count(*),和count(列名)的区别 相信大家总是在工作中,或者是学习中对于count()的到底怎么用更快.一直有很大的疑问,有的人说count(*)更快,也有的人说 ...

  3. java io 流

    Java流操作有关的类或接口: Java流类图结构: 流的概念和作用 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输 ...

  4. [转] .NET领域驱动设计—看DDD是如何运用设计模式颠覆传统架构

    阅读目录: 1.开篇介绍 2.简单了解缘由(本文的前期事宜) 3.DomainModel扩展性(运用设计模式设计模型变化点) 3.1.模型扩展性 3.2.设计模式的使用(苦心专研的设计模式.设计思想可 ...

  5. CSS3学习系列之盒样式(一)

    盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...

  6. Oracle数据库web维护客户端管理工具软件

    TreeSoft数据库管理系统使用JAVA开发,采用稳定通用的springMVC +JDBC架构,实现基于WEB方式对 MySQL,Oracle,PostgreSQL 等数据库进行维护管理操作. 功能 ...

  7. juggle添加c#版本

    此前做过一个c++版的网络层dsl:http://www.cnblogs.com/qianqians/p/4255034.html 现在给这个dsl加入c#的支持,并且对代码的结构做了优化,将语法解析 ...

  8. URL和HTTP协议(无图片)

    URL...... 示例: http://localhost/phpwind/searcher.php?keyword=phpwind&type=thread 协议部分:一般是指URL中第一个 ...

  9. if和for的应用

    语句 顺序 结束加分号 分支 让程序根据条件不同执行不同的代码 if语句 if(条件){代码} if(条件){代码}else{代码} else if(条件){代码} if嵌套 switch...cas ...

  10. Disruptor的应用示例——大文件拆分

    结合最近Disruptor的学习,和之前一直思考解决的大文件拆分问题,想到是否可以使用Disruptor作为生产者/消费者传递数据的通道呢?借助其高效的传递,理论上应当可以提升性能.此文便是此想法的落 ...