Pagination 翻页器

每一页显示若干个条目,避免在大量信息中迷失。

Pagination 翻页器

开发指南

何时使用

在有大量内容展现需要进行分页加载处理的时候。

1
2
3
4
10
前往

非受控分页

非受控分页,是指分页组件的状态由自己维护,组件值的改变可以通过 onChange 事件通知父组件,默认值由 defaultCurrent 初始化。

1
2
3
4
10
前往

受控分页

受控分页,是指分页组件的状态由父组件维护,组件自身只负责渲染其父组件传递的值,父组件通过 current 属性传递当前的值。

normal

1
2
3
4
10
前往

simple

分页类型

可以通过指定 type 属性来设置分页的类型。

To hidden per page size selector

1
2
3
4
10
前往

Type per page size selector of is dropdown,and as for the tail of the entire component

1
2
3
4
10
前往

每页显示

可以通过设置 pageSize 属性来指定每页显示的数量。
可以通过设置 pageSizeSelector 属性来指定是否显示 每页数量选择 的部件以及部件形状。
可以通过设置 pageSizeList 属性来指定 每页显示数量 可选的值。
可以通过设置 pageSizePosition 属性来指定 每页显示数量选择 的部件显示在整个组件的开始位置还是结束位置。 可以通过设置 onPageSizeChange 属性来指定每页显示的数量变化时的回调函数。

共 50 条
1
2
3
4
5

显示总数

分页组件默认不显示总数,你可以通过 totalRender 自定义总数的显示结果。

1
2
3
4
10
前往

配合 react-router 使用

单页应用场景下,Pagination 组件可以使用外部跳转的方法来实现单页内部跳转。

default align - 'tl bl'

1

custom align - 'bl tl'

1

Inside parent with "overlflow: auto"

scroll down to see the example

default align - 'tl bl'

1

custom align - 'bl tl'

1

每页显示

使用popupProps prop 中的align属性设置下拉位置。

API

Pagination

参数说明类型默认值
type分页组件类型

可选值:
'normal', 'simple'
Enum'normal'
current(受控)当前页码Number-
defaultCurrent(非受控)初始页码Number1
onChange页码发生改变时的回调函数

签名:
Function(current: Number, e: Object) => void
参数:
current: {Number} 改变后的页码数
e: {Object} 点击事件对象
Function() => {}
total总记录数Number100
totalRender总数的渲染函数

签名:
Function(total: Number, range: Array) => void
参数:
total: {Number} 总数
range: {Array} 当前数据在总数中的区间
Function-
pageShowCount页码显示的数量,更多的使用...代替Number5
pageSize一页中的记录数Number10
pageSizeSelector每页显示选择器类型

可选值:
false,'dropdown'
Enumfalse
pageSizeList每页显示选择器可选值Array<Number>/Array<Object>5, 10, 20
onPageSizeChange每页显示记录数量改变时的回调函数

签名:
Function(pageSize: Number) => void
参数:
pageSize: {Number} 改变后的每页显示记录数
Function() => {}
hideOnlyOnePage当分页数为1时,是否隐藏分页器Booleanfalse
showJumptype 设置为 normal 时,在页码数超过5页后,会显示跳转输入框与按钮,当设置 showJump 为 false 时,不再显示该跳转区域Booleantrue
popupProps弹层组件属性,透传给PopupObject-

ARIA and KeyBoard

按键说明
Tab切换页数
Space按下按钮
Enter按下按钮