基于layUI实现前端分页功能
一、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 |
触发分页后的回调,函数返回两个参数。 |
三、分页实现
在前端展示页面,代码如下:
<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基于SQLite实现的分页功能示例
php基于SQLite实现的分页功能. 这里操作数据库文件使用的是前面文章<PHP基于PDO实现的SQLite操作类>中的SQLite数据库操作类. 代码: <?php class ...
- python2.0_day19_前端分页功能的实现
我们前面完成的客户纪录展示,只有4条,如果有上百条就不能在1页中全部展示了,那样是不人性化的.另外一次性取出来,数据量也比较大.假如现在有95条数据,我们想实现一个每页展示20条,那就分为5页.假如我 ...
- 使用原生js实现前端分页功能
背景: 从后台提取出来数据,在前端进行分页. 代码: user-manage.js window.onload = function(){ var result = { message : " ...
- 前端分页功能实现(PC)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>加 ...
- Mybatis Generator实现分页功能
Mybatis Generator实现分页功能 分类: IBATIS2013-07-17 17:03 882人阅读 评论(1) 收藏 举报 mybatisibatisgeneratorpage分页 众 ...
- Mybatis分页-利用Mybatis Generator插件生成基于数据库方言的分页语句,统计记录总数 (转)
众所周知,Mybatis本身没有提供基于数据库方言的分页功能,而是基于JDBC的游标分页,很容易出现性能问题.网上有很多分页的解决方案,不外乎是基于Mybatis本机的插件机制,通过拦截Sql做分页. ...
- poscms基于list标签实现的查询分页功能
poscms系统本身有一个在查询页(search页面)实现的查询分页功能,基于系统封装的php函数dr_search_url() 但是今天的需求除了导航栏.列表页.详情页都实现查询功能外,关键是有两个 ...
- Django中使用JS通过DataTable实现表格前端分页,每页显示页数,搜索等功能
Django架构中自带了后端分页的技术,通过Paginator进行分页,前端点击按钮提交后台进行页面切换. 优缺点:后端分页对于数据量大的场景有其优势,但页面切换比较慢. 后端分页python3代码如 ...
- 基于SSM框架的简易的分页功能——包含maven项目的搭建
新人第一次发帖,有什么不对的地方请多多指教~~ 分页这个功能经常会被使用到,我之前学习的时候找了很多资源,可都看不懂(笨死算了),最后还是在朋友帮助下做出了这个分页.我现在把我所能想到的知识 做了一个 ...
随机推荐
- Ionic3新特性--页面懒加载2加载其他组件
在第一节中,我们介绍了页面的懒加载方式,并进行了初步的分析,这里,我们将进一步介绍如何配合页面懒加载进行其他组件Component.Pipe.Directive等的模块化,和加载使用. 首先说明一点, ...
- Mybatis中如何查询时间段内的数据
最后一个是正确的,前边的三个是可能遇到的坑,给大家展示一下,如果不需要的,可以直接跳到最后看: 有时候我们需要查询一张表内一段时间内操作的数据,大家很容易就想到了 between ? and ? 这个 ...
- python os模块学习
一.os模块概述 Python os模块包含普遍的操作系统功能.如果你希望你的程序能够与平台无关的话,这个模块是尤为重要的. 二.常用方法 1.os.name 输出字符串指示正在使用的平台.如果是wi ...
- Spring学习(11)---JSR-250标准注解之 @Resource、@PostConstruct、@PreDestroy
1)@Resource(JSR-250标准注解,推荐使用它来代替Spring专有的@Autowired注解) Spring 不但支持自己定义的@Autowired注解,还支持几个由JSR-250规范定 ...
- 机器学习:线性判别式分析(LDA)
1.概述 线性判别式分析(Linear Discriminant Analysis),简称为LDA.也称为Fisher线性判别(Fisher Linear Discriminant,FLD) ...
- 对于JSONObject,我只是临时抱佛脚
说起JSON,大家就谈不上陌生了,因为对于数据传输语言,各位只认json,即使有XML语言,但是各位很少用吧.我也是,但是之前用过的json转换工具各种各样,我记忆中有过GSON(google).fa ...
- 机器学习:保序回归(IsotonicRegression):一种可以使资源利用率最大化的算法
1.数学定义 保序回归是回归算法的一种,基本思想是:给定一个有限的实数集合,训练一个模型来最小化下列方程: 并且满足下列约束条件: 2.算法过程说明 从该序列的首元素往后观察,一旦出现乱序现象停止该轮 ...
- HTML5 jQuery+FormData 异步上传文件,带进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...
- fdisk 非交互式创建 分区
一. key 非交互式创建分区, 与 交互式创建分区区别不大. 使用 fdisk 的默认选项, 使用空行即可, 不用回车. 创建 主分区 和 扩展分区时, 需要注意 分区号 二. 创建主分区 fdis ...
- kaggle Titanic心得
Titanic是kaggle上一个练手的比赛,kaggle平台提供一部分人的特征,以及是否遇难,目的是预测另一部分人是否遇难.目前抽工作之余,断断续续弄了点,成绩为0.79426.在这个比赛过程中,接 ...