<!doctype html>

<html>

<head>

  <meta charset="utf-8">

  <title>layui</title>

  <meta name="renderer" content="webkit">

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <link rel="stylesheet" href="css/layui.css"  media="all">

</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>自定义主题 ： 赤橙黄绿青蓝紫 神马的，随便设:-O</legend>

</fieldset>

<div id="demo2"></div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

  <legend>自定义文本 ： 上一页、下一页、首页、末页统统被替换</legend>

</fieldset>

<div id="demo3"></div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

  <legend>不显示首页、末页</legend>

</fieldset>

<div id="demo4"></div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

  <legend>开启 URL hash</legend>

</fieldset>

<div id="demo5"></div>

<blockquote class="layui-elem-quote">

  切换分页后看地址栏的变化（#后面的fenye名字可以随便定义），该功能对于单页应用有着极大的帮助

</blockquote>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

  <legend>只显示上一页、下一页</legend>

</fieldset>

<div id="demo6"></div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

  <legend>是时候看一下完整功能了！</legend>

</fieldset>

<div id="demo7"></div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

  <legend>将一段已知数组分页展示</legend>

</fieldset>

<div id="demo8"></div>

<ul id="biuuu_city_list"></ul>              

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script src="layui.js" charset="utf-8"></script>

<script>

layui.use(['laypage', 'layer'], function(){

  var laypage = layui.laypage

       ,layer = layui.layer;

  laypage({

    cont: 'demo1' //容器，值可以传入元素id或者原生DOM或jquery对象，如：cont:'id'
                  //cont:document.getElementById('id');     cont:$('#id');

    ,pages: 100 //总页数

    ,groups: 5 //连续显示分页数

  });

  laypage({

    cont: 'demo2'

    ,pages: 100

    ,skin: '#1E9FFF'  //控制分页皮肤

  });

  laypage({

    cont: 'demo3'

    ,pages: 100

    ,first: 1           //控制首页，值支持三种类型，如：first:'首页'   first:false则表示不显示首页项

    ,last: 100          //控制尾页，值支持三种类型，如：last:'尾页' last:false则表示不显示尾页项

    ,prev: '<em><</em>'

    ,next: '<em>></em>'

  });

  laypage({

    cont: 'demo4'

    ,pages: 100

    ,first: false

    ,last: false

  });

  laypage({

    cont: 'demo5'

    ,pages: 100

    ,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页

    ,hash: 'fenye' //自定义hash值

  });

  laypage({

    cont: 'demo6'

    ,pages: 5

    ,groups: 0

    ,first: false

    ,last: false

    ,jump: function(obj, first){

      if(!first){

        layer.msg('第 '+ obj.curr +' 页');

      }

    }

  });

  laypage({

    cont: 'demo7'

    ,pages: 100

    ,skip: true

  });

  //将一段数组分页展示

  //测试数据

  var data = [

    '北京',

    '上海',

    '广州',

    '深圳',

    '杭州',

    '长沙',

    '合肥',

    '宁夏',

    '成都',

    '西安',

    '南昌',

    '上饶',

    '沈阳',

    '济南',

    '厦门',

    '福州',

    '九江',

    '宜春',

    '赣州',

    '宁波',

    '绍兴',

    '无锡',

    '苏州',

    '徐州',

    '东莞',

    '佛山',

    '中山',

    '成都',

    '武汉',

    '青岛',

    '天津',

    '重庆',

    '南京',

    '九江',

    '香港',

    '澳门',

    '台北'

  ];

  var nums = 5; //每页出现的数据量

  //模拟渲染

  var render = function(curr){

    //此处只是演示，实际场景通常是返回已经当前页已经分组好的数据

    var str = '', last = curr*nums - 1;

    last = last >= data.length ? (data.length-1) : last;

    for(var i = (curr*nums - nums); i <= last; i++){

      str += '<li>'+ data[i] +'</li>';

    }

    return str;

  };

  //调用分页

  laypage({

    cont: 'demo8'

    ,pages: Math.ceil(data.length/nums) //得到总页数

    ,jump: function(obj){

      document.getElementById('biuuu_city_list').innerHTML = render(obj.curr);

    }

  });

});

</script>

</body>

</html>

分页组件 - layui.laypage的更多相关文章

  1. LayUI分页，LayUI动态分页，LayUI laypage分页，LayUI laypage刷新当前页

    LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>> ...

  2. 分页插件 layui.laypage 的用法

    参考 layui.laypage 官方文档 https://www.layui.com/demo/laypage.html 第一步下载插件 (注意不能只引入引入 layui.css和layui.js ...

  3. 关于layui.laypage.render 刷新首页没有分页问题

    前言: 最近写项目遇到一个问题,就是使用vue里的layui.laypage.render 分页时,刷新首页会只有一页,但后台传来的数据是有50多页的,所有的数据也都一一对应,调了好久debug,终于 ...

  4. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  5. angular-ui分页组件

    http://angular-ui.github.io/bootstrap/#/pagination 分页组件只提供生成分页按钮,数据的显示需要使用ng-repeat, 注意设置 items-per- ...

  6. asp.net mvc4+mysql做一个简单分页组件（部分视图）

    在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstr ...

  7. ReactJS实现的通用分页组件

    大家多少都自己写过各种版本的分页工具条吧,像纯服务版的,纯jsWeb板的,Angular版的,因为这个基础得不能再基础的功能太多地方都会用到,下面我给出以个用ReactJS实现的版本,首先上图看下效果 ...

  8. 基于vue2.0的分页组件开发

    今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...

  9. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

随机推荐

  1. android 使用jdbc1.3.0 操作 sql server

    String connectDB = "jdbc:jtds:sqlserver://172.16.1.15:1433;DatabaseName=YanBu";// 连接字符串换成这 ...

  2. YbSoftwareFactory 代码生成插件【十八】：树形结构下的查询排序的数据库设计

    树形结构的排序在中国特色下十分普遍也非常重要,例如常说的五大班子,党委>人大>政府>政协>纪委,每个班子下还有部门,岗位,人员,最终排列的顺序通常需要按权力大小.重要性等进行排 ...

  3. 使用Astah制作UML时序图

    Astah制作UML图--详解 时序图的制作 开篇语: 本文为光荣之路原创文章,欢迎转载,但请注明出处. 做测试的难免看到开发画出各种设计图,都很羡慕,比如: 帅么,漂亮么,其实我们测试人员也可以轻松 ...

  4. web项目 log4j2的路径问题

    项目中用到log4j2记录日志,结果运行的时候总也不见log文件的产生. 查看官方文档得知,在web项目中使用log4j2需要加入log4j-web包 log4j2.xml <?xml vers ...

  5. c++源文件后缀名

    C中: 头文件后缀名: .h 源文件后缀名: .c C++中: 头文件后缀名: .h,   .hpp,   .hxx 源文件后缀名:.cpp,   .cc,   .cxx,   .C   .c++ 现 ...

  6. [转]让窗体不显示在Alt+Tab中

    public class MyForm : Form { protected override CreateParams CreateParams { get { const int WS_EX_AP ...

  7. mysql主从配置（基于mysql5.5.x）

    安装mysql数据库主从复制,步骤如下:1.主从服务器分别作以下准备:    1.1.数据库版本完全一致    1.2.修改root的密码, 不改也可以 2.修改主服务器master #vi /etc ...

  8. 求System.arraycopy的用法

    public class Shuzufuzhi { public static void main(String args[]) {  int myArray[]={1,2,3,4,5,6};  in ...

  9. 。U盘安装windows7操作系统

    1.下载. Windows 7微软原版无修改的系统镜像下载地址:Windows 764位旗舰版ed2k://|file|cn_windows_7_ultimate_with_sp1_x64_dvd_u ...

  10. 遗传算法在JobShop中的应用研究（part 6：结果显示）

    def FormatSolution(s, C, I): T = [0 for j in xrange(I.n)] S = [[0 for t in I[j]] for j in xrange(I.n ...