第一步引用两个文件:

<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框架做分页的更多相关文章

  1. layui框架使用总结

    最近一个后台系统使用layui框架做的,遇到好多坑在这里总结一下. 1.layui的基本使用,下面的在他下面写,其他的事件也要在这个里面写     行内onclick事件是监听不到写在下面这种代码中的 ...

  2. layui框架部分功能介绍

    注意:代码的所有功能都没有导入layui的css样式 一,分页功能 layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能 下面就看一下我对layui框架分页的介 ...

  3. Layui框架+PHP打造个人简易版网盘系统

    网盘系统   大家应该都会注册过致命的一些网盘~如百度云.百科介绍:网盘,又称网络U盘.网络硬盘,是由互联网公司推出的在线存储服务,服务器机房为用户划分一定的磁盘空间,为用户免费或收费提供文件的存储. ...

  4. layui 数据表格+分页+搜索+checkbox+缓存选中项数据

    在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索,  还有checkbox,  支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后, ...

  5. SSM框架——实现分页和搜索分页

    登录|注册     在路上 在路上,要懂得积累:在路上,要学会放下:我在路上!Stay hungry,Stay foolish.       目录视图 摘要视图 订阅 [公告]博客系统优化升级     ...

  6. PHP 框架: CodeIgniter 分页教程

    PHP 框架: CodeIgniter 分页教程 分类: PHP2009-04-23 11:09 3209人阅读 评论(0) 收藏 举报 框架phpbooksdatabaseurl数据库 目录(?)[ ...

  7. layui框架图片上传至服务器

    注意:只可用于数据量较小的项目,数据量庞大的项目不要用这个,否则会造成图片数量庞大,至服务器运行速度变慢或瘫痪 HTML代码 //前端使用的是layui框架<div class="la ...

  8. 用PHP+MySQL来做分页的演示

    用php做分页弄懂逻辑关系其实不难,不过我在听课的时候估计是被老师讲的那些变量里的英文单词给听懵了,因为有几个变量的名字都很像,只是换了两三个英文字母而已,有的就少几个这样的,听到一半已经不知道老师讲 ...

  9. mybatis框架中分页的实现

    2.分页的实现? 分页的时候考虑的问题: 分页的大小,分页的索引. 比如:分页的大小为10,分页的起始索引为1(索引从1开始) 第一页:1到10.    起始行号: (页的索引-1)*分页大小+1 结 ...

随机推荐

  1. Mac OS X 启用超级用户 sudo -s 获得系统权限 Mac终端命令

    为了防止误操作破坏系统,用户状态下时没有权限操作系统重要文件, 所以先要取得root权限:“sudo -s” 详见:https://www.jianshu.com/p/138b98e662ed

  2. markdown & mathjax 初学笔记 latex

    stackedit 1.标题大小和# # 数量代表标题大小,越多越小 2.* 斜体 * 3.** 粗体 ** 4.*** 又粗又斜 *** PS:符号紧贴 5. 分隔符 - - - 三个减号  PS: ...

  3. oracle 启动em (使用浏览器打开)

    在cmd命令中执行 emctl status dbconsole 如果报错,确实oracle_UNQNAME 这个时候需要设置变量 oracle_hostname 和oracle_unqname 执行 ...

  4. RESTful API学习Day2 - Django REST framework

    Django REST framework 参考文档: 官方文档:官方文档 中文文档:中文文档 一.是什么? 基于Django开发RESTful API的一个框架 为什么要用它? 补充: ​ CBV的 ...

  5. python 小数据池,is and "==",decode ,encode

    一:小数据池 1.python运行中的缓存: 2.目的:缓存我们字符串,整数,布尔值.在使用的时候不需要创建过多的对象 3.python 缓存数据:缓存:int, str, bool.         ...

  6. GDI+学习---1.初识GDI+

    ---恢复内容开始--- GDI+: GDI+由一组C++类实现,是对于GDI的继承,GDI+不仅优化了大部分GDI性能而且提供了更多特性.允许应用程序开发者将信息显示在显示器或者打印机上,而无需考虑 ...

  7. Django REST framework 第四章 Authentication

    到目前为止,撰写的API没有任何限制关于谁能更新.删除snippet. 我们更想要一些高级行为来确保: 1.代码段总是跟创建者有关联 2.只要认证通过的用户才能创建 3.只有创建者有权限更新或者删除 ...

  8. okhttp3与旧版本okhttp的区别分析

    https://www.jianshu.com/p/4a8c94b239b4  待总结学习

  9. 中国各省市县级 JSON 文件

    参考链接:https://blog.csdn.net/lzhlzz/article/details/41347929

  10. springboot整合dubbo\zookeeper做注册中心

    springboot整合dubbo发布服务,zookeeper做注册中心.前期的安装zookeeper以及启动zookeeper集群就不说了. dubbo-admin-2.5.4.war:dubbo服 ...