制作网站的时候,有时候我们常常会被一些要求复杂的分页给困住,最后要么就是写一个简单的分页,要么就做成瀑布流的形式。

有了Layui之后,我认为开发人员多了一个选择,那就是尝试用Layui内置的分页模块

使用方法如下:

JavaScript:

layui.use(['layer','laypage','jquery'], function () {
var layer = layui.layer,$ = layui.jquery, laypage = layui.laypage;
//执行一个laypage实例
// 订单管理的分页
laypage.render({
elem: 'fpage', //注意,这里的 test1 是 ID,不用加 # 号
layout: ['prev', 'page', 'next', 'count'],
count: "{$count}", //数据总数,从服务端得到
prev: '上一页',
next: '下一页',
limit: "{$limit}"
,curr: location.search.replace('?page=', '') //这里是重点,从地址栏取得当前页
,jump: function(obj, first){
//obj包含了当前分页的所有参数,比如:
// console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
// console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first){
//do something window.location.href="{:U('news/lists')}?page="+obj.curr; }
}
}); });
在引用Layui的js文件的时候,要记得 layui.js 和 layui.all.js 只引用一个就可以了,否则会出现表单提交两次的问题。
分页样式可以根据 Layui分页文档 自己定制。

PHP:

     $page=I('get.page')?(I('get.page')-1):0;
$limit=10; //每页数量
$start=$limit*$page; //开始页 $count = $model -> getNewsCount($condition);
$data = $model -> getNewsList($condition, 'id,title,description,thumb,create_time', $start.','.$limit, 'listorder asc,create_time desc'); //数据传到前端
$this -> assign("count", $count);
$this -> assign("limit", $limit);
$this -> assign("data", $data);

HTML:

{volist name="data" id="vo"}
<li class="clearfix">
<a href="{:U('news/detail',['id'=>$vo['id']])}">
<img src="{$vo.thumb}" alt="" class="fl">
<div class="fl clearfix">
<div class="fl">
<h4>{$vo.title}</h4>
<p>
{$vo.description}
</p>
</div>
<p class="time fr">{$vo.create_time|Date='m-d',###}</p>
</div>
</a>
</li>
{/volist}

THE END

Layui的分页模块在网站中的应用的更多相关文章

  1. layui封装自定义模块

    转自:https://lianghongbo.cn/blog/430585105a35948c layui是国人开发的一款非常简洁的UI框架,使用了模块化加载方式,因此在使用过程中我们难免需要添加自己 ...

  2. layui 封装自定义模块

    转自:https://lianghongbo.cn/blog/430585105a35948c layui是国人开发的一款非常简洁的UI框架,使用了模块化加载方式,因此在使用过程中我们难免需要添加自己 ...

  3. [译]MVC网站教程(四):MVC4网站中集成jqGrid表格插件(系列完结)

    目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.         jqGrid和AJAX 5.         GridSettings 6.  ...

  4. Sticker.js – 帮助你在网站中加入贴纸效果

    Sticker.js 是一个很小的 JavaScript 库,它允许您在网页中创建漂亮的贴纸效果.没有依赖关系(不需要 jQuery),可以在大多数支持 CSS3 的主流浏览器工作.下面有简单的使用示 ...

  5. 在 Windows Azure 网站中配置动态 IP 地址限制

    我们最近对 Windows Azure 网站进行了升级,并启用了IIS8的动态 IP 限制模块.现在,开发人员可以为其网站启用并配置动态 IP 限制功能(或简称 DIPR). 可以通过以下链接查看此 ...

  6. 项目总结17-使用layui table分页表格

    项目总结17-使用layui table分页表格总结 前言 在项目中,需要用到分页的表格来展示数据,发现layui的分页表格,是一个很好的选择:本文介绍layui table分页表格的前后端简单使用 ...

  7. Layui Table 分页记忆选中

    Layui Table 分页记忆选中 挺好的功能,之前为什么放弃了,哈哈哈! 在最早的版本中,layui 的 table 会记录每页的勾选状态,但很多用户反馈这是 bug,因为当他们获取选中数据时,其 ...

  8. 通过代码审计找出网站中的XSS漏洞实战(三)

    一.背景 笔者此前录制了一套XSS的视频教程,在漏洞案例一节中讲解手工挖掘.工具挖掘.代码审计三部分内容,准备将内容用文章的形式再次写一此,前两篇已经写完,内容有一些关联性,其中手工XSS挖掘篇地址为 ...

  9. 新西兰程序员 ASP.NET网站中设置404自定义错误页面

    新西兰程序员 ASP.NET网站中设置404自定义错误页面 在用ASP.NET WebForm开发一个网站时,需要自定义404错误页面. 做法是这样的 在网站根目录下建立了一个404.html的错误页 ...

随机推荐

  1. java实现第四届蓝桥杯带分数

    带分数 题目描述 100 可以表示为带分数的形式:100 = 3 + 69258 / 714 还可以表示为:100 = 82 + 3546 / 197 注意特征:带分数中,数字1~9分别出现且只出现一 ...

  2. Linux 源码包服务的管理

    源码包安装服务的启动 使用绝对路径,调用启动脚本来启动.不同源码包的启动脚本不同,可以查看源码包的安装说明,查看启动脚本的方法 /usr/local/apache2/bin/apachectl sta ...

  3. c#发布补丁

    日常开发维护项目中,可能会遇到发布后出现bug,或者忘记改配置文件等等问题,这个时候,可能就需要重新进行下发布,有的开发小伙伴可能会把编译后的代码文件整个替换.这样做虽然也可以实现发布,但是有几个弊端 ...

  4. 数据结构与算法-python描述-单链表

    # coding:utf-8 # 单链表的相关操作: # is_empty() 链表是否为空 # length() 链表长度 # travel() 遍历整个链表 # add(item) 链表头部添加元 ...

  5. OSI七层模型及各层作用

    物理层:建立.维护.断开物理连接 数据链路层:该层的作用包括了物理地址寻址,数据的成帧,流量控制,数据的检错,重发等.该层控制网络层与物理层之间的通信,解决的是所传输数据的准确性的问题.为了保证传输, ...

  6. Redis学习笔记(十九) 发布订阅(上)

    Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息,它的发布与订阅功能由PUBLISH.SUBSCRIBE.PSUBSCRIBE等命令组成. ...

  7. 【深度思考】JDK8中日期类型该如何使用?

    在JDK8之前,处理日期时间,我们主要使用3个类,Date.SimpleDateFormat和Calendar. 这3个类在使用时都或多或少的存在一些问题,比如SimpleDateFormat不是线程 ...

  8. C#数据结构与算法系列(一):介绍

    1.介绍 数据结构:是指相互之间存在一种或多种特定关系的数据元素的集合用计算机存储.组织数据的方式.数据结构分别为逻辑结构.(存储)物理结构和数据的运算三个部分. 数据结构包括:线性结构和非线性结构. ...

  9. TensorFlow从0到1之TensorFlow常用激活函数(19)

    每个神经元都必须有激活函数.它们为神经元提供了模拟复杂非线性数据集所必需的非线性特性.该函数取所有输入的加权和,进而生成一个输出信号.你可以把它看作输入和输出之间的转换.使用适当的激活函数,可以将输出 ...

  10. CSS文本相关之水平排列[4]

    在正常流中,文本都是从左往右.自上而下排列显示,如果想要改变排列方向的话,可以通过CSS属性来改变. text-align属性 文本排列(text-align)可改变文本在水平上的方向,但不改变内部的 ...