LuLu UI pure版中文文档 » Pagination分页

Fork Me

Pagination分页

作为插件单独使用

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

引用下面CSS:

<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/pure/css/common/ui/Pagination.css">

引用下面的JS:

<script src="https://qidian.gtimg.com/lulu/pure/js/common/ui/Pagination.js"></script>

分页组件自定义元素

基本的效果和使用

无需初始化,直接使用自定义的 <ui-pagination> 元素即可。效果如下:

HTML代码如下:

<ui-pagination total="100"></ui-pagination>

支持 totalcurrentpermodehref 这5个自定义参数。

如果有点击事情需要处理,可以这样绑定:

var p = document.querySelector('ui-pagination');
if (p.data) {
    p.data.pagination.callback.click = function (eleClicked, current) {
        // this就是当前实例对象
        console.log(current);
    };
}

也可以使用自定义的 change 事件处理:

p.addEventListener('change', function () {
    console.log(this.data.pagination.params.current);                
});

自定义元素是一种快捷使用方式,少部分参数功能较弱,例如 href 参数默认不支持 Function 类型,需要通过暴露的 params 对象进行重置。

其他自定义参数测试

代码如下:

<ui-pagination total="100" current="5" per="10" mode="short"></ui-pagination>

属性值修改与同步测试

代码如下(核心部分已经高亮):

button.addEventListener('click', function () {
    document.querySelectorAll('ui-pagination').forEach(function (elePagination) {
        elePagination.total = 200;
    });

    this.textContent = '修改成功';
    this.disabled = true;
});

DOM 插入与渲染测试

同时测试下设置动态 href 链接地址(见代码红色高亮部分)。

代码如下:

button.addEventListener('click', function () {
    this.parentElement.insertAdjacentHTML('afterend', '<ui-pagination total="66" href="?pageid=${current}"></ui-pagination>');
});

is-pagination语法

无需初始化,直接使用 is-pagination 属性也可以实现分页效果。效果如下:

代码示意:

<div data-total="100" data-current="5" data-per="10" is-pagination></div>
<div data-total="100" data-current="5" data-per="10" data-mode="short" is-pagination></div>

可以看到,分页数据使用 data-* 属性设置。

分页组件实例方法构造

基本效果和使用

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

总数据量: 每页数目:

// 长分页
new Pagination(document.querySelector('#testPage'), {
    total: eleInputTotal.value,
    per: eleInputPer.value
});

// 短分页
new Pagination(document.querySelector('#testPage2'), {
    total: eleInputTotal.value,
    per: eleInputPer.value,
    mode: 'short'
});

普通链接地址的分页

new Pagination(document.querySelector('#testPage3'), {
    total: 400,
    current: 1,
    href: function (current) {
        return '?pageid=' + current;
    }
});

语法和参数

new Pagination(element, options);

其中:

element
必需。Element元素或String字符串。显示分页的容器元素或者对应的选择器。
options
可选。纯Object对象。可选参数,具体见下表:
参数名称 支持类型 默认值 释义
total Number 0 总数据量。默认长度为0。注意,是数据条目总数,不是分页总数。
current Number 1 当前页码数。默认是选中第1页。
per Number 15 每页显示的条目数。
mode String long 分页的类别。目前支持的参数有:longshort
href String|Function javascript: 可点击分页项的href值,默认是javascript:

如果值字符串值,支持${current}动态数据,值等同于当前点击分页的页码数。例如{ href: "?query=page${current}" },则生成的分页的href属性值会是:?query=page1?query=page2?query=page3...

还支持Function类型,用来返回实时的href地址,实现传统的分页跳转效果。支持一个参数,为当前的分页页码数。

onClick Function function () {} 点击分页时候触发的方法。其中,默认该回调函数this指当前实例对象。支持两个参数,分别指代当前选中的分页元素,和当前点击分页对应的分页数。

关于实例对象

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

var myPage = new Pagination(element);

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

myPage: {
    element:{
        // 显示的分页元素,
        // pagination和container是同一个元素
        pagination: null,
        container: null
    },
    params: {
        // 分页一些参数
        total: 0,
        current: 1,
        per: 15,
        mode: 'long',
        // 分页的href值
        href: null
    },
    callback: {
        // 点击的事件回调
        click: function () {}
    },
    // 分页HTML创建
    create: function () {},
    // 分页更新
    show: function () {},
    // 分页刷新
    refresh: function () {}
}

另外,实例对象和分页容器元素之间有存储关系,假设容器元素是element,则我们实例对象可以使用下面的方法获取:

var myPage = element.data.pagination;

上面自定义<ui-pagination>元素添加click事件就是使用这个特性实现的。

其他说明

如果需要手动刷新分页数据,建议使用实例的 refresh() 方法,而不是每次都 new 一个新的实例,避免不必要的内存开销。

refresh() 方法执行之前,我们需要改变实例的一些属性值,比方说,总数目或者每页数目,我们直接修改实例对象的属性值就可以了。

例如,每页的条目数从15变成30, 则:

myPage.params.per = 30;
myPage.refresh();

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

var objMyPage = new Pagination(null, {
  total: 400,
  current: 1,
  per: 15
});
// objMyPage.create()就是分页HTML数据
console.log(objMyPage.create());
本页贡献者:

zhangxinxu,nanaSun