LuLu UI组件中文文档 » 分页

一、分页(条目恒定)

1. 使用示意

   修改下面的一些数值，预览分页效果：

   总数据量： 每页数目： 15 30

   new Pagination($('#testPage'), {
       length: elPageLength.val() * 1,
       every: elPageEvery.val() * 1
   });
   new Pagination($('#testPage2'), {
       length: elPageLength.val() * 1,
       every: elPageEvery.val() * 1
       mode: 'short'
   });

   动态href地址的分页

   var currentPageId = 1;
   if (/pageid/.test(location.href)) {
       $(window).scrollTop($('#testPage').offset().top);
       currentPageId = location.href.split('pageid=')[1].split(/\D/g)[0];
   }
   new Pagination($('#testPage3'), {
       length: 400,
       current: currentPageId,
       href: function(current) {
           return '?pageid=' + current;
       }
   });

2. 语法和参数

   new Pagination(container, options);

   或者：

   container.pagination(options);

   其中container是显示分页的容器元素，options为可选参数，具体见下表：

   参数名称	支持类型	默认值	释义
   length	Number	0	总数据量。默认长度为0. 注意，是数据条目总数，不是分页总数。
   current	Number	1	当前页码数。默认是选中第一页。
   every	Number	15	每页显示的条目数。
   mode	String	long	分页的类别。目前支持的参数有：long和short
   href	String|Function	javascript:	可点击分页项的href值，默认是javascript:. 还支持Function类型，用来返回真实的href地址，实现传统的分页跳转效果。支持一个参数，为当前的分页值。
   onClick	Function	$.noop	点击分页时候触发的方法。其中，默认该回调函数this指分页元素本身。支持两个参数，分别指代当前分页实例对象，和当前点击的分页数。

3. 关于实例对象

   假设我们有一个名为myPage的实例对象，代码为：

   var myPage = new Pagination(el);

   则myPage对象暴露了如下属性和方法：

   myPage: {
       el: {
         container: el
       },
       num: {
         length: 0,
         current: 1,
         every: 15
       },
       create: function(num, mode) {
         // 返回分页字符串内容
         // num和mode都是可缺省，默认值分别是{ length: 0, current: 1, every: 15 }和'long'
       },
       show: function() {
         // 更新分页
       }
   }

   强烈建议分页手动刷新的时候走实例的show()方法，而不是每次都new一个新的实例，因为虽然效果看上去一样，实际上内存开销已经伤不起了。

   当然，在show()方法执行之前，我们需要改变实例的一些属性值，比方说，总数目(删除列表某一数据)，或者每页数目(下拉分页数修改)，我们直接修改实例对象的属性值就可以，例如，每页的条目数从15变成30, 则：

   myPage.num.every = 30;
   myPage.show();

   如果你只想获得分页字符串，可以使用create()方法，使用举例：

   var pageHTML = new Pagination(null, {}).create({
     length: 400,
     current: 1,
     every: 15
   });

   如果使用的是el.pagination()这种语法，则实例对象可以这么获取：

   el.pagination();
   var myPage = el.data('pagination');

二、作为插件单独使用

本前端分页可以单独作为插件使用。

引用下面CSS：

<link rel="stylesheet" href="//qidian.gtimg.com/lulu/theme/peak/css/common/ui/Pagination.css">

JS为：

<script src="//qidian.gtimg.com/lulu/theme/peak/js/common/ui/Pagination.js"></script>

单独使用Demo演示