LuLu UI组件中文文档 » 分页

Fork Me

分页

一、分页(条目恒定)

  1. 使用示意

    修改下面的一些数值,预览分页效果:

    总数据量: 每页数目:

    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 分页的类别。目前支持的参数有:longshort
    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演示

Fork Me 返回顶部