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

文档 Github➹

Pagination分页

安装与调用

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

引用下面的JS:

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

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

<script type="module">
    import "../../theme/edge/js/common/ui/Pagination.js";
</script>

概述

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 />

支持totalcurrentpermodehref这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>

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

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

DOM插入与渲染测试

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

代码如下:

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-currentdata-perdata-totaldata-loadingdata-href

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

下面测试下直接append一段包含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-totaldata-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异步加载内容

代码如下:

// 监听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 Number 0 总数据量。默认长度为0。注意,是数据条目总数,不是分页总数。
current Number 1 当前页码数。默认是选中第1页。
per Number 15 每页显示的条目数。
mode String long 分页的类别。目前支持的参数有:longshort
href String javascript: 可点击分页项的href值,默认是javascript:

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

loading Boolean false 是否正在加载,当设置为true时,当前页码会出现loading

totalcurrentperloading属性可通过.来获取或者设置,例如

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) // 获取分页相关信息
})
            
本页贡献者:

xboxyan