使用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 结 ...
随机推荐
- C#中连接MySQL数据
小结一下MySQL在C#中是如何连接的,并做一些简单的选择(SELECT).插入( INSERT).更新( UPDATE).删除(DELETE ) (一)连接 a) Firstly, you shou ...
- JS处理数据四舍五入
一,使用Math.toFixed toFixed() 方法可把 Number 四舍五入为指定小数位数的数字. 语法NumberObject.toFixed(num) 但是网友说toFixed bug比 ...
- Android文字转语音引擎（TTS）使用
百度网盘下载地址 密码:3si0资源来源:https://blog.csdn.net/Sqq_yj/article/details/82460580?utm_source=blogxgwz4 简单比较 ...
- VS2010显示行号
选项->文本编辑器->如果使用C#开发选择C#->勾选行号->确定
- VS2017 15.6之后支持直接反编译了
在 15.6 预览版 2 中,增加了导航到反编译源功能. 启用后,在任何引用的类型或成员上调用转到定义或查看定义时,将显示其通过 ILSpy 反编译使用重新构造方法主体的定义. 要打开此功能,请转到“ ...
- 在window上使用 linux shell 删除文件夹递归地
目的 在windows环境下, 整理代码,代码中含有 .svn 文件夹, 此文件夹在所有受控目录下都存在, 需要统一删除. 但是对windows的shell不熟悉,想用linux rm来删除, 如何实 ...
- 关于JSON CSRF的一些思考
CSRF作为常见漏洞,一直受到关注和研究,JSON是一种应用广泛的轻量级数据交换格式,当CSRF去POST一段JSON,情况可能会变得有些不一样:此次就一种特殊情况下的CSRF进行分析,权当抛砖引玉. ...
- 第20月第17天 mvvm 多次点击push -ObjC
1. 响应式库EasyReact建成后,为了能使其得到更好的利用,更好地降低使用的理解和学习成本,臧成威老师又带领团队开发了基于响应式的MVVM框架:EasyMVVM. https://www.jia ...
- java SPI & spring factories
SPI 全称为 (Service Provider Interface) ,是JDK内置的一种服务提供发现机制.SPI是一种动态替换发现的机制, 比如有个接口,想运行时动态的给它添加实现,你只需要添加 ...
- 请求神器 postman安装
1. 先下载postman(http://pan.baidu.com/s/1pLERz5p 密码:aqy2) 2.将你的包存放在文件夹中 列如名称为postman 3.在Chrome的地址栏中输入:c ...