第一步引用两个文件:

<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. 002_Add Two Numbers

    # Definition for singly-linked list. # class ListNode: # def __init__(self, x): # self.val = x # sel ...

  2. mssql 创建函数简单实例

    CREATE FUNCTION [dbo].[f_DailyIncome] ( @userId int, @date date ) ,) AS BEGIN ,); ) from Channel_Use ...

  3. Coursera, Deep Learning 1, Neural Networks and Deep Learning - week4, Deep Neural Networks

    Deep Neural Network Getting your matrix dimention right 选hyper-pamameter 完全是凭经验 补充阅读: cost 函数的计算公式: ...

  4. 函数语法：Js之on和addEventListener的使用与不同

    一.addEventListener语法 DOM标准:elem.addEventListener("事件名",函数对象,是否在捕获阶段触发) ---是否在捕获阶段触发= true/ ...

  5. linux 查看文件夹大小

    参考链接:  http://www.cnblogs.com/iconfig/p/4863063.html

  6. BFS与DFS算法解析

    1)前言 和树的遍历类似,图的遍历也是从图中某点出发,然后按照某种方法对图种所有顶点进行访问,且仅访问一次. 但是图的遍历相对树的遍历更为复杂,因为图中任意顶点都能与其他顶点相邻,所以在图的遍历中必须 ...

  7. Core Mvc传值ViewData、ViewBag和return view(model)

    先定义一个Model类Student namespace Lession.Models { public class Student { public string Name { get; set; ...

  8. kotlin中“==”和“===”的区别

    code 1 fun main(args: Array<String>) { val a : Int = 1000 println(a == a) //true println(a === ...

  9. K - Subarrays OR Gym - 102152K （思维）

    题目链接: K - Subarrays OR Gym - 102152K 题目大意:T组测试样例,然后n个数,让你求每一个l,r中有多少个不同的异或值. 具体思路: 对于(1,i)这个区间, 我们当前 ...

  10. Maven 传递依赖冲突解决（了解）

    1 传递依赖冲突解决(了解) 传递依赖:A(项目)依赖B,B依赖C(1.1版本),B是A的直接依赖,C就是A的传递依赖 导入依赖D,D依赖C(1.2版本) 1.1 Maven自己调解原则 1.1.1  ...