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

安装与调用

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

引用下面的JS：

<script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/ui/Pagination.js"></script>

本组件为Web Components，引用时需添加type="module"，也可采用如下方式进行引用

<script type="module">
    import "https://unpkg.com/lu2/theme/edge/js/common/ui/Pagination.js";
</script>

如果是npm安装调用，则：

import 'lu2/theme/edge/js/common/ui/Pagination.js';

如果 JS import语法报错，试试在业务代码中动态引入。

import('lu2/theme/edge/js/common/ui/Pagination.js');

概述

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

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

ui-pagination自定义元素

基本的效果和使用

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

HTML代码如下：

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

注意：<ui-pagination></ui-pagination>不能简写成<ui-pagination />

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

如果需要监听页码监听事件，可以这样绑定：

var elePagination = document.querySelector('ui-pagination');
elePagination.onchange = functtion(ev){
    // 可通过以下几种方式获取current，查看控制台
    console.log(this.current);
    console.log(ev.target.current);
    console.log(ev.detail.current);
}
// 也可以通过addEventListener进行绑定
elePagination.addEventListener('change',function(ev){
    console.log(this.current);
    console.log(ev.target.current);
    console.log(ev.detail.current);
})

其他自定义参数测试

代码如下：

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

属性值修改与同步测试

HTML代码如下：

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

修改上面分页的total为200

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

button.addEventListener('click', function () {
    pagination.total = 200;
    this.textContent = '修改成功';
    this.disabled = true;
});

DOM插入与渲染测试

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

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

代码如下：

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

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>

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

插入一段包含 is-pagination 设置的HTML

相关JS代码如下所示：

button.addEventListener('click', function (event) {
    this.parentElement.insertAdjacentHTML('afterend', '<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'), // 需要插入的容器，不传则不渲染到页面（即存在内存中）
    // 绑定onChange事件
    onChange: (ev) => {
        console.log(ev)
    }
})

其他相关参数可参考后面描述

使用构造语法创建：创建一个分页组件

返回的 pagination 即为分页组件的dom节点 <ui-pagination></ui-pagination>，可通过 .total 等操作，同上述，例如将刚才的分页总数设置为300：

相关JS代码如下所示：

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

element.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;

比方说大家可以点击此按钮测试下：点击我

分页组件实例

基本效果和使用

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

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

代码如下：

// 下拉或者输入框值改变后
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异步加载内容

代码如下：

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

处于loading状态下不可点击

自定义样式

比如实现一个水平居中的分页，如下

代码如下：

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

// Pagination.css
.my-pagination{
    justify-content: center;
    --ui-blue: #673AB7
}

属性和事件

total、current、per、loading属性可通过.来获取或者设置，例如

pagination.total // 获取总数据量
pagination.total = 200 // 设置总数据量为200

事件

该组件实现了change事件，与一般的元素调用方法相同，有以下3种方式

1.直接绑定在HTML元素上

<ui-pagination onchange="Func(event)"></ui-pagination>

2.通过element.onchange方式

pagination.onchange = function(){
    console.log(this.current)
}

3.通过element.addEventListener方式

pagination.addEventListener('change', function(){
    console.log(this.current)
})

事件event对象包含了自定义属性，结构如下

/*
event:{
    detail:{
        current,
        per,
        total,
    }
}
*/

pagination.addEventListener('change', function(ev){
    console.log(ev.detail) // 获取分页相关信息
})