基于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项目的搭建
新人第一次发帖,有什么不对的地方请多多指教~~ 分页这个功能经常会被使用到,我之前学习的时候找了很多资源,可都看不懂(笨死算了),最后还是在朋友帮助下做出了这个分页.我现在把我所能想到的知识 做了一个 ...
随机推荐
- canvas——随机生成迷宫
先上图. 效果 代码 随机生成迷宫要求任意两点都能够找到相同的路径,也就是说,迷宫是一个连通图.随机生成迷宫可以使用普里姆算法.广度优先算法.深度优先算法等实现.这里将使用普里姆算法通过生成最小数的方 ...
- Vivado简单调试技能
Vivado简单调试技能 1.关于VIO核的使用 首先配置VIO核: 配置输入输出口的数量5,5 配置输入口的位宽 配置输出口位宽和初始值. 例化与使用: vio_0 U1 ( .clk(clk_27 ...
- Nmap绕过防火墙&脚本的使用
Nmap是用于端口扫描,服务检测,甚至是漏洞扫描等多种功能的强大工具.Nmap从入门到高级覆盖了许多基础的概念和命令,在这篇文章的第二部分,我将提及Nmap一些高级的技术. 防火墙和入侵检测系统(ID ...
- Linux 安装配置 Tomcat
1.下载 tomcat Linux 版本 oracle 官网下载地址:http://tomcat.apache.org/download-80.cgi 百度云盘链接:http://pan.baidu. ...
- Bootstrap 常用组件汇总
Bootstrap 官方文档:http://www.bootcss.com/ Bootstrap Multiselect 多选下拉组件 官方文档:http://www.kuitao8.com/demo ...
- VR全景智慧城市常诚:信息技术点亮“智慧城市”
亚太城市峰会暨市长论坛日前在澳大利亚昆士兰州首府布里斯班举行,"智慧城市"成为焦点议题.来自135个国家和地区的市长.副市长及代表们共同讨论如何利用高新科技解决城市发展中的问题,让 ...
- 基于Jmeter的轻量级接口压力测试(一)
一.操作步骤: 1.在测试计划下新增一个线程组,并在线程组下新增一个http请求: 2.读取配置文件中的参数:在添加的http请求下添加配置元件-CSV DATA SET CONFIG 3.配置待测试 ...
- Bash内置命令
Bash有很多内置命令,因为这些命令是内置的,因此bash不需要在磁盘上为它们定位,执行速度更快. 1)列出所有内置命令列表$enable 2)关闭内置命令test$enable -n test 3) ...
- EF添加
1.添加单个模型(CreatRule()是构造模型)(Shop_ActivityRuleProduct是类) var rule = CreatRule(model); var ruled = db.S ...
- JS键盘事件对象之keyCode、charCode、which属性对比
先说一些有关键盘事件的事项:用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这 ...