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 相关文章推荐
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
浅析js中substring和substr的方法
Nov 09 Javascript
Js的Array数组对象详解
Feb 22 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
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
php+js实现异步图片上传实例分享
2014/06/02 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
laravel 数据验证规则详解
2019/10/23 PHP
Js中sort()方法的用法
2006/11/04 Javascript
javascript入门·对象属性方法大总结
2007/10/01 Javascript
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
jQuery事件用法详解
2016/10/06 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
你不可不知的Vue.js列表渲染详解
2019/10/01 Javascript
vue中的mescroll搜索运用及各种填坑处理
2019/10/30 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
结束运行python的方法
2020/06/16 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
物业经理求职自我评价
2013/09/22 职场文书
经济管理专业求职信
2014/06/09 职场文书
理财计划书
2014/08/14 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
详解python的异常捕获
2022/03/03 Python