logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
6.0.0-alpha.3
  • 组件总览
  • 更新日志
    v6.0.0-alpha.3
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Masonry瀑布流
      6.0.0
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
      废弃
    • Popover气泡卡片
    • QRCode二维码
      5.1.0
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
      5.0.0
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
何时使用
代码演示
基本
方向
更多
改变
跳转
迷你
简洁
受控
总数
全部展示
上一步和下一步
自定义语义结构的样式和类
API
Semantic DOM
主题变量(Design Token)

Pagination
分页

分页器用于分隔长列表,每次只加载一个页面。
使用import { Pagination } from "antd";
反馈
components/pagination提交问题待解决
文档
编辑此页
文档贡献者
Menu导航菜单Steps步骤条

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
X
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
WeaveFox logoWeaveFox-前端智能研发
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
开发
设计
loading

何时使用

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

代码演示

API

通用属性参考:通用属性

jsx
<Pagination onChange={onChange} total={50} />
参数说明类型默认值版本
align对齐方式start | center | end-5.19.0
classNames自定义组件内部各语义化结构的类名。支持对象或函数Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string>-
current当前页数number-
defaultCurrent默认的当前页数number1
defaultPageSize默认的每页条数number10
disabled禁用分页boolean-
hideOnSinglePage只有一页时是否隐藏分页器booleanfalse
itemRender用于自定义页码的结构,可用于优化 SEO(page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode-
pageSize每页条数number-
pageSizeOptions指定每页可以显示多少条number[][10, 20, 50, 100]
responsive当 size 未指定时,根据屏幕宽度自动调整尺寸boolean-
showLessItems是否显示较少页面内容booleanfalse
showQuickJumper是否可以快速跳转至某页boolean | { goButton: ReactNode }false
showSizeChanger是否展示 pageSize 切换器,当 total 大于 50 时默认为 trueboolean | SelectProps-SelectProps: 5.21.0
showTitle是否显示原生 tooltip 页码提示booleantrue
showTotal用于显示数据总量和当前数据顺序function(total, range)-
simple当添加该属性时,显示为简单分页boolean | { readOnly?: boolean }-
size当为 small 时,是小尺寸分页default | smalldefault
styles自定义组件内部各语义化结构的内联样式。支持对象或函数Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties>-
total数据总数number0
onChange页码或 pageSize 改变的回调,参数是改变后的页码及每页条数function(page, pageSize)-
onShowSizeChangepageSize 变化的回调function(current, size)-

Semantic DOM

  • 1
  • 2
  • 3
  • 4
  • 5
  • root
    6.0.0
    根元素,设置flex布局、对齐方式、换行和列表样式
  • item
    6.0.0
    页码元素,设置尺寸、内边距、边框、背景色、悬停态和激活态样式

主题变量(Design Token)

组件 Token如何定制?
Token 名称描述类型默认值
itemActiveBg页码激活态背景色string#ffffff
itemActiveBgDisabled页码激活态禁用状态背景色stringrgba(0,0,0,0.15)
itemActiveColorDisabled页码激活态禁用状态文字颜色stringrgba(0,0,0,0.25)
itemBg页码选项背景色string#ffffff
itemInputBg输入框背景色string#ffffff
itemLinkBg页码链接背景色string#ffffff
itemSize页码尺寸number32
itemSizeSM小号页码尺寸number24
miniOptionsSizeChangerTop每页展示数量选择器 topnumber0
全局 Token如何定制?
  • 1
  • 2
  • 3
  • 4
  • 5
基本

基础分页。

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
  • 1
  • 2
  • 3
  • 4
  • 5

  • 1
  • 2
  • 3
  • 4
  • 5

  • 1
  • 2
  • 3
  • 4
  • 5
方向
5.19.0
  • 1
  • •••
  • 4
  • 5
  • 6
  • 7
  • 8
  • •••
  • 50
  • 10 条/页
更多

更多分页。

CodeSandbox Icon
codepen icon
External Link Icon
Expand Icon
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • 10 条/页

  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • 10 条/页
改变

改变每页显示条目数。

  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • 10 条/页
    跳至页

  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • 10 条/页
    跳至页
跳转

快速跳转到某一页。

  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5
  • 10 条/页
    跳至页
  • Total 50 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • Total 50 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 10 条/页
    跳至页
迷你

迷你版本。

  • /5

  • 2/5

  • /5
简洁

简单的翻页。

CodeSandbox Icon
codepen icon
External Link Icon
Expand Icon
  • 1
  • 2
  • 3
  • 4
  • 5
受控

受控制的页码。

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
  • Total 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20 条/页

  • 1-20 of 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20 条/页
总数

通过设置 showTotal 展示总共有多少数据。

  • Total 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 9
  • 10 条/页
    跳至页
全部展示

展示所有配置选项。

CodeSandbox Icon
codepen icon
External Link Icon
Expand Icon
  • Previous
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • Next
  • 10 条/页
上一步和下一步

修改上一步和下一步为文字链接。

CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • 10 条/页
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • 10 条/页
自定义语义结构的样式和类

通过 classNames 和 styles 传入对象/函数可以自定义 Pagination 的语义化结构样式。

6.0.0
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Hitu Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Hitu Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon
Hitu Icon
CodeSandbox Icon
Hitu Icon
codepen icon
External Link Icon
Expand Icon