使用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 结 ...
随机推荐
- Android资源重命名
Android资源比如图片重命名后,Resource里看到的还是之前的名字,可以关掉AndroidStudio,从新打开就正常了
- ubuntu没有/usr/include/sys目录
实际上不是没有sys目录,只是系统给换路径了 32位系统:/usr/incude/i386-linux-gnu/sys 64位系统:/usr/include/x86_64-linux-gnu/sys/ ...
- Coursera, Machine Learning, Unsupervised Learning, K-means, Dimentionality Reduction
Clustering K-means: 基本思想是先随机选择要分类数目的点,然后找出距离这些点最近的training data 着色,距离哪个点近就算哪种类型,再对每种分类算出平均值,把中心点移动到 ...
- Kaldi的delta特征
Delta特征是将mfcc特征(13维)经过差分得到的 它是做了一阶二阶的差分 提取的mfcc特征是13维的 然后通过delta就变成了39维 一阶差分: D(P(t))=P(t)-P(t-1) 二阶 ...
- ssm mysql 新增数据返回id
描述: 在ssm项目中,新增一条数据,返回该数据的数据库id(主键) 实现方法: 1.xml 增加 useGeneratedKeys="true" keyProperty=&qu ...
- java并发基础
一.创建线程 1.使用Executor:java.util.concurrent包中的执行器(Execute)为你管理Thread对象,从而简化并发编程. package thread; import ...
- sql常用问题(一)
一.sql要掌握 1.sum select sum(score) from table 2.group select name, sum(score) from table group by 3.a ...
- WSGI、uwsgi和uWSGI
一.WSGI WSGI ( Web Server Gateway Interface )是一个网络服务器和网络应用的通用接口的规范或者用于Python框架. 由于python开发人员在网络框架的选择限 ...
- python - list 和 tuple
- shell脚本 统计一段程序运行时间【转】
转自:https://bbs.csdn.net/topics/391943383#include <stdio.h> #include <stdlib.h> #include ...