layui分页效果实现代码


Posted in Javascript onMay 19, 2017

本文实例为大家分享了layui分页效果的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>分页</title>
  <link rel="stylesheet" href="layui/css/layui.css" >
 </head>
 <body>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
   <legend>开门见山 : 默认分页</legend>
  </fieldset>
  <div id="demo1"></div>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
   <legend>开启 URL hash</legend>
  </fieldset>
  <div id="demo5"></div>

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
   <legend>是时候看一下完整功能了!</legend>
  </fieldset>
  <div id="demo7"></div>

  <script src="layui/layui.js"></script>
  <script>
   layui.use(['laypage', 'layer'], function(){
    var laypage = layui.laypage
    ,layer = layui.layer;

    laypage({
     cont: 'demo1'
     ,pages: 100 //总页数
     ,groups: 5 //连续显示分页数
    });

    laypage({
     cont: 'demo5'
     ,pages: 100
     ,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
     ,hash: 'fenye' //自定义hash值
    });
    laypage({
     cont: 'demo7'
     ,pages: 100
     ,skip: true
    });
   });
  </script>
 </body>
</html>

效果图:

layui分页效果实现代码

官网分页

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
dojo 之基础篇(二)之从服务器读取数据
Mar 24 Javascript
css图片自适应大小
Nov 28 Javascript
js 颜色选择器(兼容firefox)
Mar 05 Javascript
jQuery 核心函数以及jQuery对象
Mar 23 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
npm ci命令的基本使用方法
Sep 20 Javascript
layui前段框架日期控件使用方法详解
May 19 #Javascript
详解Node.js开发中的express-session
May 19 #Javascript
前端页面文件拖拽上传模块js代码示例
May 19 #Javascript
jQuery操作之效果详解
May 19 #jQuery
AngularJS中的promise用法分析
May 19 #Javascript
几种响应式文字详解
May 19 #Javascript
关于Bootstrap按钮组件消除黄框的方法
May 19 #Javascript
You might like
咖啡知识大全
2021/03/03 新手入门
PHP获取文件夹内文件数的方法
2015/03/12 PHP
PHP排序算法类实例
2015/06/17 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python 爬虫学习笔记之多线程爬虫
2016/09/21 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
python连接mysql有哪些方法
2020/06/24 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
效能监察建议书
2014/05/19 职场文书
清明节演讲稿
2014/05/27 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
利用JavaScript写一个简单计算器
2021/11/27 Javascript
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
Go语言grpc和protobuf
2022/04/13 Golang
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server