第一步引用两个文件:

<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. IBM X3650 M5服务器RAID阵列设置

    生产环境中的raid配置说明: 一. 开机后,注意引导界面,按F1键进入BIOS进行设置 二. 进入BIOS后,选择system setting--storage ,进入磁盘阵列配置界面,可以看到M5 ...

  2. redis非关系型数据库的基本语法

    导入并连接数据库: import redis # 导入redis模块,通过python操作redis 也可以直接在redis主机的服务端操作缓存数据库 import time # host是redis ...

  3. [ASP.net教程]IIS服务器 远程发布（Web Deploy）配置

    asp.net 网站有三种常用的发布方式:分别是拷贝开发机上发布好的文件到服务器硬盘上.打包成安装程序到服务器上安装.通过Visual Studio 开发平台远程发布到服务器. 在asp.net网站的 ...

  4. computed，methods,watch

    加载顺序: 在官方文档中,强调了computed区别于method最重要的两点 computed是属性调用,而methods是函数调用 computed带有缓存功能,而methods不是 计算属性是基 ...

  5. jQuery的节点添加、删除、替换等操作

    //几种添加节点的方法 //$("p").append("<b>你好吗?</b>");//向p元素中追加<b> //$(&q ...

  6. Thymeleaf--:fragment

    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" ...

  7. HDU 4857 逃生（拓扑排序）

    拓扑排序 一.定义 对一个有向无环图(Directed Acyclic Graph简称DAG)G进行拓扑排序,是将G中所有顶点排成一个线性序列,使得图中任意一对顶点u和v,若<u,v> ∈ ...

  8. 第三节，CNN案例-mnist手写数字识别

    卷积:神经网络不再是对每个像素做处理,而是对一小块区域的处理,这种做法加强了图像信息的连续性,使得神经网络看到的是一个图像,而非一个点,同时也加深了神经网络对图像的理解,卷积神经网络有一个批量过滤器, ...

  9. Jquery的一些常见用法

    谨以此文怀念我们大学的时光,Jquery3.4.0下载 https://code.jquery.com/jquery-3.4.0.min.js ⒈常用方法 $("#div1").h ...

  10. LwIP Application Developers Manual3---链路层和网络层协议之ARP,IPV4

    1.前言 本文主要讲述链路层和网络层的几种协议:ARP,ipv4 2. ARP 2.1 ARP的主要应用 ARP的主要应用是在与互联网相连的以太网网络层,该层需要一些机制将MAC地址(该地址主要由制造 ...