Pagination

分页器组件。

何时使用 #

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

代码演示 #

非受控分页 #

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

受控分页 #

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

更多分页 #

当分页数大于5时,自动展示 ...

每页显示 #

可以通过设置 pageSize 属性来指定每页显示的数量。
可以通过设置 pageSizeSelector 属性来指定是否显示 每页数量选择 的部件以及部件形状。
可以通过设置 pageSizeList 属性来指定 每页显示数量 可选的值。
可以通过设置 pageSizePosition 属性来指定 每页显示数量选择 的部件显示在整个组件的开始位置还是结束位置。
可以通过设置 onPageSizeChange 属性来指定每页显示的数量变化时的回调函数。
pageSize 仅支持受控模式,当设置 pageSizeSelector 时,需要同时设置 pageSizeonPageSizeChange 才能达到效果。

跳转 #

快速跳转到某一页,可以设置 false 来隐藏。

分页尺寸 #

可以通过指定 size 属性来设置分页的尺寸。

前进后退按钮只显示箭头 #

可以通过指定 shape 属性来设置前进后退按钮箭头的显示方式。

简洁/迷你 风格 #

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

显示总数 #

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

配合 react-router 使用 #

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

API #

Pagination #

参数 说明 类型 默认值 是否必填
type 分页组件类型 'normal' | 'simple' | 'mini' 'normal'
shape 前进后退按钮样式 'normal' | 'arrow-only' | 'arrow-prev-only' | 'no-border' 'normal'
size 分页组件大小 'small' | 'medium' | 'large' 'medium'
current (受控)当前页码 number 1
defaultCurrent (非受控)初始页码 number 1
onChange 页码发生改变时的回调函数 (current: number, e: object) => void -
total 总记录数 number 100
totalRender 总数的渲染函数 (total: number, range: number[]) => void -
pageShowCount 页码显示的数量,更多的使用...代替 number 5
pageSize 一页中的记录数 number 10
pageSizeSelector 每页显示选择器类型 false | 'filter' | 'dropdown' false
pageSizeList 每页显示选择器可选值 Array<number> | Array<{ label: string; value: number }> [5, 10, 20]
pageNumberRender 自定义页码渲染函数,函数作用于页码button以及当前页/总页数的数字渲染 (index: number) => ReactNode index => index
pageSizePosition 每页显示选择器在组件中的位置 'start' | 'end' 'start'
useFloatLayout 存在每页显示选择器时是否使用浮动布局 boolean false
onPageSizeChange 每页显示记录数量改变时的回调函数 (pageSize: number) => void -
hideOnlyOnePage 当分页数为1时,是否隐藏分页器 boolean false
showJump type 设置为 normal 时,在页码数超过5页后,会显示跳转输入框与按钮,当设置 showJump 为 false 时,不再显示该跳转区域 boolean true
link 设置页码按钮的跳转链接,它的值为一个包含 {page} 的模版字符串,如:http://www.taobao.com/{page} string -
popupProps 弹层组件属性,透传给Popup PopupProps -
selectProps 页码选择器下拉组件属性,透传给Select SelectProps -

无障碍键盘操作指南 #

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