使用layui框架做分页
第一步引用两个文件:
<link href="layui-v2.2.5/layui-v2.2.5/layui/css/layui.css" rel="stylesheet" media="all" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<script src="layui-v2.2.5/layui-v2.2.5/layui/layui.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
第二步写一个div id名为demo0（根据自己自定义）
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>总页数低于页码总数</legend>
</fieldset>
<div id="demo0"></div> //第一种
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>总页数大于页码总数</legend>
</fieldset>
<div id="demo1"></div> //第二种
</body>
第三步写脚本:
<script>
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
//第一种 总页数低于页码总数
laypage.render({
elem: 'demo0'
, count: 50 //数据总条数(根据实际情况获取)
, jump: function (obj) {
alert(obj.curr); //获得当前页码
}
});
//第二种 总页数大于页码总数
laypage.render({
elem: 'demo1'
,count: 70 //数据总条数(根据实际情况获取)
,jump: function(obj){
alert(obj.curr); //获得当前页码
}
});
})
下面最完整的分页，了解就行
layui.use(['laypage', 'layer'], function () {
var laypage = layui.laypage
, layer = layui.layer;
var $ = layui.$;
var total_page = $("#total_page").val();
laypage.render({
elem: 'demo1'
, limit: 1
, count: 50
, curr: function () { //通过url获取当前页，也可以同上（pages）方式获取
var page = location.search.match(/page=(\d+)/);
return page ? page[1] : 1;
}()
, layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
, jump: function (obj, first) {
//obj包含了当前分页的所有参数，比如：
alert(obj.curr) //获得当前页
//console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
//console.log(obj.limit); //得到每页显示的条数
//首次不执行
if (!first) {
window.location.href = "?page=" + obj.curr;
}
}
});
});
</script>
使用layui框架做分页的更多相关文章
- layui框架使用总结
最近一个后台系统使用layui框架做的,遇到好多坑在这里总结一下. 1.layui的基本使用,下面的在他下面写,其他的事件也要在这个里面写 行内onclick事件是监听不到写在下面这种代码中的 ...
- layui框架部分功能介绍
注意:代码的所有功能都没有导入layui的css样式 一,分页功能 layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能 下面就看一下我对layui框架分页的介 ...
- Layui框架+PHP打造个人简易版网盘系统
网盘系统 大家应该都会注册过致命的一些网盘~如百度云.百科介绍:网盘,又称网络U盘.网络硬盘,是由互联网公司推出的在线存储服务,服务器机房为用户划分一定的磁盘空间,为用户免费或收费提供文件的存储. ...
- layui 数据表格+分页+搜索+checkbox+缓存选中项数据
在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后, ...
- SSM框架——实现分页和搜索分页
登录|注册 在路上 在路上,要懂得积累:在路上,要学会放下:我在路上!Stay hungry,Stay foolish. 目录视图 摘要视图 订阅 [公告]博客系统优化升级 ...
- PHP 框架: CodeIgniter 分页教程
PHP 框架: CodeIgniter 分页教程 分类: PHP2009-04-23 11:09 3209人阅读 评论(0) 收藏 举报 框架phpbooksdatabaseurl数据库 目录(?)[ ...
- layui框架图片上传至服务器
注意:只可用于数据量较小的项目,数据量庞大的项目不要用这个,否则会造成图片数量庞大,至服务器运行速度变慢或瘫痪 HTML代码 //前端使用的是layui框架<div class="la ...
- 用PHP+MySQL来做分页的演示
用php做分页弄懂逻辑关系其实不难,不过我在听课的时候估计是被老师讲的那些变量里的英文单词给听懵了,因为有几个变量的名字都很像,只是换了两三个英文字母而已,有的就少几个这样的,听到一半已经不知道老师讲 ...
- mybatis框架中分页的实现
2.分页的实现? 分页的时候考虑的问题: 分页的大小,分页的索引. 比如:分页的大小为10,分页的起始索引为1(索引从1开始) 第一页:1到10. 起始行号: (页的索引-1)*分页大小+1 结 ...
随机推荐
- forEach 如何提前终止 跳出运行
forEach 如何提前终止 跳出运行 try{ arr.forEach(function(item,index){ if (...) { foreach.break=new Error(" ...
- Ubuntu中安装python3.6（转）
因为TensorFlow只支持到python3.6,所以安装python3.6版本 Python3.6的使用越来越普遍.Ubuntu16.04的版本中默认胸自带python2和python3.5的版本 ...
- [C++]PAT乙级1007.素数对猜想 (20/20)
/* 1007. 素数对猜想 (20) 让我们定义 dn 为:dn = pn+1 - pn,其中 pi 是第i个素数.显然有 d1=1 且对于n>1有 dn 是偶数.“素数对猜想”认为“存在无穷 ...
- Chrome及Firefox插件
注:以下所有工具都是笔者自己目前使用的 密码管理工具 lastpass 护眼工具 眼睛护航 待续……
- cpp 模版函数
template <typename T> void fillingTable(T ***table, int row, int column, int defaultValue = ST ...
- Coursera Deep Learning 2 Improving Deep Neural Networks: Hyperparameter tuning, Regularization and Optimization - week2, Assignment(Optimization Methods)
声明:所有内容来自coursera,作为个人学习笔记记录在这里. 请不要ctrl+c/ctrl+v作业. Optimization Methods Until now, you've always u ...
- 最好用的 IntelliJ 插件 Top 10
最好用的 IntelliJ 插件 Top 10 https://my.oschina.net/didispace/blog/1583238
- IBM X3650 M5服务器RAID阵列设置
生产环境中的raid配置说明: 一. 开机后,注意引导界面,按F1键进入BIOS进行设置 二. 进入BIOS后,选择system setting--storage ,进入磁盘阵列配置界面,可以看到M5 ...
- 洛谷P2251 【质量检测】
无意中刷st表题看到的题目(抄模板),一看到题目,,,没想用st表,直接莫队?????跑起来也不是特别慢... 这里用flag数组记录出现次数,set维护最小值,用的时候直接取头部. 代码也很短 #i ...
- 5.22 HTML 列表标签和表单标签
1,ul无序列表 标签 ul:unordered list ,就是无序列表的意思. li: listitem 列表项的意思.无序列表的每一项都是<li>. <!DOCTYPE h ...