LuLu UI pure版中文文档 » 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>

支持 total，current，per，mode，href 这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>

属性值修改与同步测试

修改上面两个分页的total为200

代码如下（核心部分已经高亮）：

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

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

DOM 插入与渲染测试

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

插入一个<ui-pagination>分页元素

代码如下：

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-* 属性设置。

分页组件实例方法构造

基本效果和使用

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

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

// 长分页
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对象。可选参数，具体见下表：

关于实例对象

假设我们有一个名为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());