分页组件

分页组件 laypage 提供了前端的分页逻辑，使得我们可以很灵活处理不同量级的数据，从而提升渲染效率。

示例

  <div id="demo-laypage-normal-1"></div>
<div id="demo-laypage-normal-2"></div>
<script>
layui.use(function(){
  var laypage = layui.laypage;
  // 普通用法
  laypage.render({
    elem: 'demo-laypage-normal-1',
    count: 50 // 数据总数
  });
  laypage.render({
    elem: 'demo-laypage-normal-2',
    count: 100 // 数据总数
  });
});
</script>

自定义主题

  <div id="demo-laypage-theme-1"></div>
<div id="demo-laypage-theme-2"></div>
<div id="demo-laypage-theme-3"></div>
<script>
layui.use(function(){
  var laypage = layui.laypage;
  // 自定义主题
  laypage.render({
    elem: 'demo-laypage-theme-1',
    count: 100,
    theme: '#1E9FFF'
  });
  laypage.render({
    elem: 'demo-laypage-theme-2',
    count: 100,
    theme: '#FF5722'
  });
  laypage.render({
    elem: 'demo-laypage-theme-3',
    count: 100,
    theme: '#FFB800'
  });
});
</script>

自定义文本

  <div id="demo-laypage-text"></div>
<script>
layui.use(function(){
  var laypage = layui.laypage;
  // 自定义文本
  laypage.render({
    elem: 'demo-laypage-text',
    count: 100,
    first: '首页',
    last: '尾页',
    prev: '<em>←</em>',
    next: '<em>→</em>'
  });
});
</script>

  <div id="demo-laypage-pn-hide"></div>
<script>
layui.use(function(){
  var laypage = layui.laypage;
  // 不显示上一页、下一页
  laypage.render({
    elem: 'demo-laypage-pn-hide',
    count: 100,
    prev: false,
    next: false
  });
});
</script>

  <div id="demo-laypage-pn-show"></div>
<script>
layui.use(function(){
  var laypage = layui.laypage;
  var layer = layui.layer;
  // 只显示上一页、下一页、当前页
  laypage.render({
    elem: 'demo-laypage-pn-show',
    count: 50,
    groups: 1,
    first: false,
    last: false,
    layout: ['prev', 'page','next'],
    jump: function(obj, first){
      // 首次不执行
      if(!first){
        layer.msg('第 '+ obj.curr +' 页');
      }
    }
  });
});
</script>

自定义排版

  <div id="demo-laypage-layout-1"></div>
<div id="demo-laypage-layout-2"></div>
<div id="demo-laypage-layout-3"></div>
<script>
layui.use(function(){
  var laypage = layui.laypage;
  // 自定义排版
  laypage.render({
    elem: 'demo-laypage-layout-1',
    count: 1000,
    layout: ['limit', 'prev', 'page', 'next']
  });
  laypage.render({
    elem: 'demo-laypage-layout-2',
    count: 1000,
    layout: ['prev', 'next', 'page']
  });
  laypage.render({
    elem: 'demo-laypage-layout-3',
    count: 1000,
    layout: ['page', 'count']
  });
});
</script>

自定义每页条数的选择项

  <div id="demo-laypage-limits"></div>
<script>
layui.use(function(){
  var laypage = layui.laypage;
  // 自定义每页条数的选择项
  laypage.render({
    elem: 'demo-laypage-limits',
    count: 1000,
    limit: 100,
    limits: [100, 300, 500],
    layout: ['prev', 'page', 'next', 'limit']
  });
});
</script>

完整显示

  <div id="demo-laypage-all"></div>
<script>
layui.use(function(){
  var laypage = layui.laypage;
  // 完整显示
  laypage.render({
    elem: 'demo-laypage-all', // 元素 id
    count: 100, // 数据总数
    layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
    jump: function(obj){
      console.log(obj);
    }
  });
});
</script>

高级 - 开启 HASH

  <div id="demo-laypage-hash"></div>
<script>
layui.use(function(){
  var laypage = layui.laypage;
  // 开启 HASH
  laypage.render({
    elem: 'demo-laypage-hash',
    count: 500,
    curr: location.hash.replace('#!curr=', ''), // 初始获取 hash 值为 curr 的当前页
    hash: 'curr' // 自定义 hash 名称
  });
});
</script>

高级 - 将一段已知数组分页展示

  <div id="demo-laypage-data"></div>
<div id="demo-laypage-data-view"></div> 
<script>
layui.use(function(){
  var laypage = layui.laypage;
  // 将一段已知数组分页展示
  var data = ["北京","上海","广州","深圳","杭州","长沙","合肥","宁夏","成都","西安","南昌","上饶","沈阳","济南","厦门","福州","九江","宜春","赣州","宁波","绍兴","无锡","苏州","徐州","东莞","佛山","中山","成都","武汉","青岛","天津","重庆","南京","九江","香港","澳门","台北"]; // 测试数据
  laypage.render({
    elem: 'demo-laypage-data',
    count: data.length,
    jump: function(obj){
      // 模拟渲染
      document.getElementById('demo-laypage-data-view').innerHTML = function(){
        var arr = [];
        var thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
        layui.each(thisData, function(index, item){
          arr.push(item);
        });
        return arr.join('，');
      }();
    }
  });
});
</script>

API

API	描述
var laypage = layui.laypage	获得 `laypage` 模块。
laypage.render(options)	laypage 组件渲染，核心方法。

渲染

laypage.render(options);

参数 options : 基础属性配置项。#详见属性

属性

属性名	描述	类型	默认值
elem	绑定分页容器。值可以是容器 `id` 或 DOM 对象。如： `elem: 'id'` 注意：这里不能加 `#` 号 `elem: document.getElementById('id')`	string DOM	-
count	数据总数。一般通过后端得到	number	-
limit	每页显示的条数。	number	`10`
limits	每页条数的选择项。若 `layout` 参数开启了 `limit` ，则会出现每页条数的 select 选择框	array	`[10,…,50]`
curr	初始化当前页码。	number	`1`
groups	连续出现的页码数量	number	`5`
prev	自定义“上一页”的内容，支持传入普通文本和 HTML	string	`上一页`
next	自定义“下一页”的内容，用法同上。	string	`下一页`
first	自定义“首页”的内容，用法同上。	string	`1`
last	自定义“尾页”的内容，用法同上。	string	自动获得
layout	自定义分页功能区域排版。可自由排列，可选值有： `count` 数据总数区域 `prev` 上一页区域 `page` 分页区域 `next` 下一页区 `limit` 条目选项区域 `refresh` 页面刷新区 `skip` 快捷跳页区	array
theme	自定义主题。支持传入：颜色值或任意普通字符。如： `theme: '#c00'` 直接设置当前页按钮背景色 `theme: 'xxx'` 会生成 `class="layui-laypage-xxx"` 的 CSS 类，以便自定义主题	string	-
hash	设置 `hash` 名称。设置该属性后，点击分页将会自动对当前 `url` 追加：`#{hash}={curr}`，从而在页面刷新时初始化当前页码。#详细用法参考示例	string	-
回调函数
jump	分页跳转后的回调函数。函数返回两个参数：参数 `obj` : 当前分页相关的所有选项值参数 `first` : 是否首次渲染，一般用于初始加载的判断 `laypage.render({ elem: 'id', count: 70, // 数据总数，从后端得到 jump: function(obj, first){ console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。 console.log(obj.limit); // 得到每页显示的条数 // 首次不执行 if(!first){ // do something } } });`

小贴士

laypage 组件只负责分页本身的逻辑，具体的数据请求及对应的视图渲染需要另外去完成。laypage 不仅能应用在一般的异步分页上，还可直接对一段已知数据进行分页展现，如 table 组件的分页就是采用的 laypage。