Pagination 分页

分页导航,用于辅助长列表只加载部分数据,可以快速切换到指定数据页。

获取组件

import { Pagination } from 'rsuite';

// or
import Pagination from 'rsuite/Pagination';

演示

默认

尺寸

禁用

更多设置

layout 属性可以自定一个分页组件的布局,接收一个数组参数,会根据数组中值的先后顺序进行渲染,layout 的默认值为 ['pager'], 可选值包括: total(总条目输区域) 、pager(分页区域) 、limit(条目选项区域)、skip(快捷跳页区域)、-(区域占位符,撑满剩余空间) 、|(垂直分隔符)。

Props

<Pagination>

属性名称 类型 (默认值) 描述
activePage * number (1) 当前页码
boundaryLinks boolean 显示边界分页按钮 1 和 pages
classPrefix string ('pagination') 组件 CSS 类的前缀
disabled boolean | (eventKey: number) => boolean 禁用分页
ellipsis boolean 显示省略符
first boolean 显示第一页
last boolean 显示最后一页
layout LayoutType[] (['pager']) 自定义一个分页组件的布局
limit number (30) 每页显示的条数。将会借助 total 和 limit 计算出分页数
limitOptions number[] ([30,50,100]) 每页条数的选择项
linkAs ElementType (button) 为组件选项自定义元素类型
linkProps object 为组件选项添加属性
locale PaginationLocale 本地化的文本
maxButtons number 分页按钮最多显示数
next boolean 显示下一页
onChangeLimit (limit:number) => void; 每页显示的条数改变的回调
onChangePage (page:number) => void; 页码改变的回调
prev boolean 显示上一页
total * number 数据总数。一般通过服务端得到

ts:LayoutType

type LayoutType = 'total' | '-' | 'pager' | '|' | 'limit' | 'skip';
Vercel banner