ant-design/components/pagination/index.zh-CN.md
MadCcc 40e77c40d3
docs: overview dark cover (#40666)
* docs: add dark overview

* docs: show dark cover in dark theme

* docs: update cover
2023-02-09 22:17:31 +08:00

2.7 KiB

category subtitle group title cover coverDark
Components 分页 导航 Pagination https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAAAAAAAAAAAADrJ8AQ/original

采用分页的形式分隔长列表,每次只加载一个页面。

何时使用

  • 当加载/渲染所有数据将花费很多时间时;
  • 可切换页码浏览数据。

代码演示

基本 更多 改变 跳转 迷你 简洁 受控 总数 全部展示 上一步和下一步 线框风格

API

<Pagination onChange={onChange} total={50} />
参数 说明 类型 默认值 版本
current 当前页数 number -
defaultCurrent 默认的当前页数 number 1
defaultPageSize 默认的每页条数 number 10
disabled 禁用分页 boolean -
hideOnSinglePage 只有一页时是否隐藏分页器 boolean false
itemRender 用于自定义页码的结构,可用于优化 SEO (page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode -
pageSize 每页条数 number -
pageSizeOptions 指定每页可以显示多少条 string[] [10, 20, 50, 100]
responsive 当 size 未指定时,根据屏幕宽度自动调整尺寸 boolean -
showLessItems 是否显示较少页面内容 boolean false
showQuickJumper 是否可以快速跳转至某页 boolean | { goButton: ReactNode } false
showSizeChanger 是否展示 pageSize 切换器,当 total 大于 50 时默认为 true boolean -
showTitle 是否显示原生 tooltip 页码提示 boolean true
showTotal 用于显示数据总量和当前数据顺序 function(total, range) -
simple 当添加该属性时,显示为简单分页 boolean -
size 当为 small 时,是小尺寸分页 default | small default
total 数据总数 number 0
onChange 页码或 pageSize 改变的回调,参数是改变后的页码及每页条数 function(page, pageSize) -
onShowSizeChange pageSize 变化的回调 function(current, size) -