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 相关文章推荐
Prototype使用指南之range.js
Jan 10 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
深入理解JavaScript是如何实现继承的
Dec 12 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
May 03 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
js实现简单的网页换肤效果
Jan 18 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
layui之数据表格--与后台交互获取数据的方法
Sep 29 Javascript
js实现带积分弹球小游戏
Jul 21 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
js确定对象类型方法
2012/03/30 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
js局部刷新页面时间具体实现
2013/07/04 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
js图片上传的封装代码
2017/08/01 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
2018/01/18 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
对Python3中的input函数详解
2018/04/22 Python
Python爬虫实现(伪)球迷速成
2018/06/10 Python
Django中的DateTimeField和DateField实现
2021/02/24 Python
来自南加州灵感的工作和娱乐服装:TravisMathew
2019/05/01 全球购物
个人求职信范文分享
2014/01/31 职场文书
军训感想500字
2014/02/20 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
小学开学标语
2014/07/01 职场文书
六五普法宣传标语
2014/10/06 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
迎新年主持词
2015/07/06 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
解析Redis Cluster原理
2021/06/21 Redis
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android