Pagination分页模块

2025-03-03 10:20:40首发，1周前更新

Pagination模块用来创建数据分页，支持自动分页和手动分页

Pagination系列文档

Pagination分页组件 5小时前更新 Pagination分页导航（非模块） 6天前更新 ax.Pagination分页模块(class)使用数据源 需3金币 6天前更新 AX-PAGINATION分页组件(webcomponent)详细使用方法 需2金币 1周前更新 Pagination分页模块 1周前更新 ax.Pagination分页模块(class)事件和方法 需2金币 1周前更新 ax.Pagination分页模块(class)功能和特性 需4金币 1周前更新

前言

数据分页是减轻页面加载负担的一种常规手段，本分页模块支持两种模式，一是根据数据列表和每页条数渲染分页；二是通过确定的数据条数和每页条数手动渲染列表。

本分页模块支持多种展示方式，满足大多数场景需求。

简单使用

直接对节点应用ax-pagination属性即可；参数content用来设置数据源，默认1000，即内置1000条数据；参数count设置每页条数，默认每页10条数据。

当然，这两个参数最终是需要用户自定义的。

输出
HTML

```
                
                
            
```

使用id+new的形式也是可以的。

输出
HTML
JS

```
                
                
            
```

                
                new ax.Pagination('#demo01')

真实数据

可以给参数content传一个真实的数组数据，那么将按该数组数据进行分页。

输出
HTML
JS

```
                
                
            
```

                
                new ax.Pagination('#demo02',{
                    content:Array(1000).fill(null).map((k,i)=>i),
                })

渲染列表

模块默认不做列表渲染，如果已经有了真实数据，可以给参数listSel传一个列表容器选择器，那么当页数据将渲染到该容器里。

输出
HTML
JS

```
                
                
            
```

                
                new ax.Pagination('#demo03',{
                    content:Array(1000).fill(null).map((k,i)=>i),
                    listSel:'#box03',
                })

手动渲染列表

如果希望手动渲染列表，可不填listSel参数，而在located事件中手动渲染列表。

输出
HTML
JS

```
                
                
            
```

                
                new ax.Pagination('#demo32',{
                    content:1000,
                    onLocated:function(resp){
                         //resp={current,data}
                        let data = resp.data.map(k=>`${k.index}`),
                            wrap = document.querySelector('#box32'),
                            html='';
                        for(let k of data){
                            html += `<section>${k}</section>`
                        }
                        wrap.innerHTML=html;
                    }
                })

基础配置

属性	类型	默认值	说明
listSel	string	''	列表容器选择器
count	number	10	每页显示的条目数
counts	string	''	可选的每页条目数，如：'10,20,30'
current	number	1	当前页码
size	'sm' \| 'md' \| 'lg'	'md'	分页器尺寸

显示控制

属性	类型	默认值	说明
expanded	boolean	false	是否展开显示所有页码
visible	object	{edge:2,center:2}	可见页码配置
align	'left' \| 'center' \| 'right' \| ''	''	分页器对齐方式
type	'group' \| 'plain' \| ''	''	分页器样式类型
flexible	boolean	false	是否启用弹性布局
layout	string	'first\|prev\|pages\|next\|last'	分页器结构布局
classes	string	''	自定义 CSS 类名
delay	number	100	跳转防抖延迟(ms)

内容配置

属性	类型	默认值	说明
content	number \| string \| array	1000	数据源，默认自带1000条数据
contType	'total' \| 'async'\|''	''	内容类型
contData	object	{}	请求参数配置
ajax	object	{}	AJAX 请求配置
tplStr	string	''	模板字符串
tplEng	function \| null	null	模板引擎配置

DOM 结构

属性	类型	默认值	说明
names	object	{main:'div',...}	分页器各部分节点名称配置

等待函数

属性	类型	默认值	说明
b4Locate	function \| null	null	页码跳转前等待
b4RenderList	function \| null	null	列表渲染前等待

事件回调

属性	类型	默认值	说明
onLocated	function \| null	null	页码跳转完成回调
onGotCont	function \| null	null	内容获取完成回调
onToFirst	function \| null	null	跳转首页回调
onToLast	function \| null	null	跳转尾页回调
onExceeded	function \| null	null	页码超出范围回调
onRenderedList	function \| null	null	列表渲染完成回调
onRenderedPages	function \| null	null	页码渲染完成回调