第一步引用两个文件:

<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. SpringBoot系列: 使用MyBatis maven插件自动生成java代码

    ====================================pom.xml 文件====================================需要在 pom.xml 文件增加 m ...

  2. [译]Walkthrough: Using MSBuild

    原文 MSBuild是微软VS的Build平台. 你可以在Visual Studio或Windows命令行中运行MSBuild.在这我们使用VS创建一个MSBuild项目.你可以在VS中编辑项目文件, ...

  3. UE4 编译笔记

    UE4 的功能被分成了很多的模块,在API文档里每个类都有 Module 这个属性(值为模块名)每个模块使用其他模块要在Build.cs里导入,像vs里的引入库.在构建时 PublicDependen ...

  4. luogu P4491 [HAOI2018]染色

    传送门 这一类题都要考虑推式子 首先推出题目要求的式子,枚举正好有\(s\)个颜色的种类(范围\([0,p=min(\lfloor\frac{n}{s}\rfloor,m)]\)),然后对于后面的颜色 ...

  5. 【css】正确的让文本换行

    通常文本换行我们会使用word-break属性,有两个值供我们选择 word-break: break-all; word-break: break-world; 那么如何区分这两个值呢,我们看图说话 ...

  6. Got error 28 from storage engine 解决方法

    早上一来,jira点击任何页面都会报错,首先查看服务器的日志 然后服务器首先看了磁盘,果不其然,是根目录的磁盘满了, 然后就一层一层找占用最大的文件 命令: cd /usr du -sh * 找到了文 ...

  7. 事件代理on

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. ASP.NET MVC中注册Global.asax的Application_Error事件处理全局异常

    在ASP.NET MVC中,通过应用程序生命周期中的Application_Error事件可以捕获到网站引发的所有未处理异常.本文作为学习笔记,记录了使用Global.asax文件的Applicati ...

  9. linux中管理包的apt和dpkg命令用法

    1,apt-get命令 apt-get是debian,ubuntu发行版的包管理工具,与红帽中的yum工具非常类似,适用于deb包管理式的操作系统,主要用于自动从互联网的软件仓库中搜索.安装.升级.卸 ...

  10. 20165234 《Java程序设计》实验一 Java开发环境的熟悉

    一.实验报告封面 课程:Java程序设计  班级:1652班  姓名:刘津甫  学号:20165234 指导教师:娄嘉鹏  实验日期:2018年4月2日 实验时间:15:35 - 17:15  实验序 ...