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 相关文章推荐
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
layui表格实现代码
May 20 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
webpack4之如何编写loader的方法步骤
Jun 06 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 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
php,ajax实现分页
2008/03/27 PHP
探讨:使用XMLSerialize 序列化与反序列化
2013/06/08 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
[03:00]2014DOTA2国际邀请赛 Titan淘汰潸然泪下Ohaiyo专访
2014/07/15 DOTA
下载给定网页上图片的方法
2014/02/18 Python
Python EOL while scanning string literal问题解决方法
2020/09/18 Python
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
python操作 hbase 数据的方法
2016/12/18 Python
python实现按任意键继续执行程序
2016/12/30 Python
python实现桌面托盘气泡提示
2019/07/29 Python
Python对列表的操作知识点详解
2019/08/20 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
python lambda的使用详解
2021/02/26 Python
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
shallow copy和deep copy的区别
2016/05/09 面试题
房地产项目策划书
2014/02/05 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
入党函调证明材料
2015/06/19 职场文书
Android超详细讲解组件ScrollView的使用
2022/03/31 Java/Android