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

安装与调用

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

引用下面的 CSS 和 JS：

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

<script type="module" src="https://qidian.gtimg.com/lulu/hope/ui/Pagination/index.js"></script>

也可采用如下方式进行引用：

<script type="module">
    import 'https://qidian.gtimg.com/lulu/hope/ui/Pagination/index.js';
</script>

概述

Pagination 组件支持三种使用方式，分别是：

1. 使用自定义元素 <ui-pagination>（推荐）；
2. 普通元素上设置 is-pagination 属性；
3. 传统的 new Pagination() 构造语法。

ui-pagination 自定义元素

基本的效果和使用

无需初始化，直接使用自定义的 <ui-pagination> 元素即可。

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

支持total，current，per，mode，href这 5 个自定义属性。

如果需要监听页码监听事件，可以通过 addEventListener 进行绑定：

var elePagination = document.querySelector('ui-pagination');
elePagination.addEventListener('change', function (ev) {
    console.log(this.current);
    console.log(ev.target.current);
    console.log(ev.detail.current);
});

短分页

设置 mode="short" 会表现为短分页。

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

属性值修改与同步测试

当需要改变分页的总数，或者每一页的条数的时候，直接设置对应的属性值即可，例如点击某按钮，修改某分页的总数为 200。

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

button.addEventListener('click', function () {
    pagination.total = 200;
});

DOM 插入与渲染测试

测试代码如下所示。

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

is-pagination 快捷语法

本 Pagination 组件支持在原生 HTML 元素上添加 is-pagination 属性实现分页效果。使用示意：

<div is-pagination data-total="200" data-per="10"></div>

is-pagination快捷语法支持自定义其他参数，均使用data-*语法进行设置，例如支持data-current、data-per、data-total、data-loading、data-href 等属性。

<div is-pagination data-total="200" data-per="15" data-current="3" ></div>

下面测试下直接插入一段包含 is-pagination 属性的 HTML 代码，看看分页效果是不是正常出现。

button.addEventListener('click', function (event) {
    ispx.innerHTML = '<div is-pagination data-total="200" data-per="10"><div>'
});

如需获取分页属性，采用常规 dataset 方式即可，例如

// 获取当前页
pagination.dataset.current
// 获取总页数
pagination.dataset.total

new Pagination() 语法

可以采用传统的构造语法来创建一个分页组件，例如：

var pagination = new Pagination({
    current: 3,
    total: 200,
    per: 10,
    // 需要插入的容器，不传则不渲染到页面（即存在内存中）
    container: document.querySelector('#pagination')
})

返回的 pagination 即为分页组件的dom节点 <ui-pagination></ui-pagination>，可通过 .total 等操作，修改分页的总数。

button.addEventListener('click', function () {
    // pagination 为 new Pagination 返回
    pagination.total = 300;
});

参数说明

支持的参数如下表所示，无论哪种语法，都可以参考下表。

ele.pagination() 方法

语法如下：

element.pagination(options);

使用示意：

<div id="pg1" data-total="234"></div>

pg1.pagination({
    per: 20
});

无论是 new 构造语法、还是 is-pagination 快捷语法，亦或者是这里的 pagination() 方法，如果想要修改分页的总数，或者每页的数量，则直接设置data-total、data-per等属性是无效的，因为普通 HTML 元素上的这些属性并没有加入检测，此时应该找到底层的自定义元素进行设置，方法如下：

dom['ui-pagination'].total = 123;

分页组件实例

基本效果和使用

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

// 下拉或者输入框值改变后
eleInputPer.addEventListener('change', function () {
    page2.per = this.value;
    page1.per = this.value;
});
eleInputTotal.addEventListener('change', function () {
    page2.total = this.value;
    page1.total = this.value;
});

普通链接地址的分页

HTML代码如下：

<ui-pagination total="100" per="8" href="?pageid=${current}"></ui-pagination>

加载状态

常用于 ajax 异步加载内容，语法是设置 loading 属性值为 true 或 false。

// 监听change事件即可
pagination.addEventListener('change', function () {
    pagination.loading = true;
    // 这里用定时器模拟ajax请求
    setTimeout( function(){
        // 其他业务逻辑
        pagination.loading = false;
    }, 1000)
});