logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.20.6
  • 组件总览
  • 通用
    • Button
      按钮
    • FloatButton
      悬浮按钮
      5.0.0
    • Icon
      图标
    • Typography
      排版
  • 布局
    • Divider
      分割线
    • Flex
      弹性布局
      5.10.0
    • Grid
      栅格
    • Layout
      布局
    • Space
      间距
  • 导航
    • Anchor
      锚点
    • Breadcrumb
      面包屑
    • Dropdown
      下拉菜单
    • Menu
      导航菜单
    • Pagination
      分页
    • Steps
      步骤条
  • 数据录入
    • 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
      表格
    • Tabs
      标签页
    • 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
      工具类
      5.13.0

Pagination
分页

分页器用于分隔长列表,每次只加载一个页面。
使用import{ Pagination }from"antd";
源码components/pagination
文档编辑此页

相关资源

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

社区

Awesome Ant Design
Medium
Twitter
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-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
开发
设计
loading

何时使用

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

代码演示

  • 1
  • 2
  • 3
  • 4
  • 5
基本

基础分页。

codepen icon
External Link Icon
expand codeexpand code
  • 1
  • 2
  • 3
  • 4
  • 5

  • 1
  • 2
  • 3
  • 4
  • 5

  • 1
  • 2
  • 3
  • 4
  • 5
方向
codepen icon
External Link Icon
expand codeexpand code
5.19.0
  • 1
  • •••
  • 4
  • 5
  • 6
  • 7
  • 8
  • •••
  • 50
  • 10 条/页
更多

更多分页。

codepen icon
External Link Icon
expand codeexpand code
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • 10 条/页

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

改变每页显示条目数。

codepen icon
External Link Icon
expand codeexpand code
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • 10 条/页
    跳至页

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

快速跳转到某一页。

codepen icon
External Link Icon
expand codeexpand code
  • 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 条/页
    跳至页
迷你

迷你版本。

codepen icon
External Link Icon
expand codeexpand code
  • /5

  • 2/5

  • /5
简洁

简单的翻页。

codepen icon
External Link Icon
expand codeexpand code
  • 1
  • 2
  • 3
  • 4
  • 5
受控

受控制的页码。

codepen icon
External Link Icon
expand codeexpand code
  • Total 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20 条/页

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

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

codepen icon
External Link Icon
expand codeexpand code
  • Total 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 9
  • 10 条/页
    跳至页
全部展示

展示所有配置选项。

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

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

codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

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

主题变量(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如何定制?