logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
5.1.7
  • 组件总览
  • 通用
    • Button按钮
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • 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二维码
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
  • 其他
    • Affix固钉
    • App包裹组件
    • ConfigProvider全局化配置
    • FloatButton悬浮按钮
    • Watermark水印
何时使用
代码演示
基本
更多
改变
跳转
迷你
简洁
受控
总数
全部展示
上一步和下一步
API

Pagination分页

Menu导航菜单Steps步骤条

相关资源

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
yuqueAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会
加入我们

帮助

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

Ant XTech更多产品

yuque语雀-构建你的数字花园
AntVAntV-数据可视化解决方案
EggEgg-企业级 Node.js 框架
kitchenKitchen-Sketch 工具集
xtech蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

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

何时使用

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

代码演示

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

基础分页。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Pagination } from 'antd';

const App: React.FC = () => <Pagination defaultCurrent={1} total={50} />;

export default App;
  • 1
  • •••
  • 4
  • 5
  • 6
  • 7
  • 8
  • •••
  • 50
  • 10 条/页
更多

更多分页。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Pagination } from 'antd';

const App: React.FC = () => <Pagination defaultCurrent={6} total={500} />;

export default App;
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • 10 条/页

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

改变每页显示条目数。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import type { PaginationProps } from 'antd';
import { Pagination } from 'antd';

const onShowSizeChange: PaginationProps['onShowSizeChange'] = (current, pageSize) => {
  console.log(current, pageSize);
};

const App: React.FC = () => (
  <>
    <Pagination
      showSizeChanger
      onShowSizeChange={onShowSizeChange}
      defaultCurrent={3}
      total={500}
    />
    <br />
    <Pagination
      showSizeChanger
      onShowSizeChange={onShowSizeChange}
      defaultCurrent={3}
      total={500}
      disabled
    />
  </>
);

export default App;
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • 10 条/页
    跳至页

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

快速跳转到某一页。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import type { PaginationProps } from 'antd';
import { Pagination } from 'antd';

const onChange: PaginationProps['onChange'] = (pageNumber) => {
  console.log('Page: ', pageNumber);
};

const App: React.FC = () => (
  <>
    <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} />
    <br />
    <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} disabled />
  </>
);

export default App;
  • 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 条/页
    跳至页
迷你

迷你版本。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import type { PaginationProps } from 'antd';
import { Pagination } from 'antd';

const showTotal: PaginationProps['showTotal'] = (total) => `Total ${total} items`;

const App: React.FC = () => (
  <>
    <Pagination size="small" total={50} />
    <Pagination size="small" total={50} showSizeChanger showQuickJumper />
    <Pagination size="small" total={50} showTotal={showTotal} />
    <Pagination
      size="small"
      total={50}
      disabled
      showTotal={showTotal}
      showSizeChanger
      showQuickJumper
    />
  </>
);

export default App;

#components-pagination-demo-mini .ant-pagination:not(:last-child) {
  margin-bottom: 24px;
}
  • /5

  • /5
简洁

简单的翻页。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Pagination } from 'antd';

const App: React.FC = () => (
  <>
    <Pagination simple defaultCurrent={2} total={50} />
    <br />
    <Pagination disabled simple defaultCurrent={2} total={50} />
  </>
);

export default App;
  • 1
  • 2
  • 3
  • 4
  • 5
受控

受控制的页码。

expand codeexpand code
TypeScript
JavaScript
import React, { useState } from 'react';
import type { PaginationProps } from 'antd';
import { Pagination } from 'antd';

const App: React.FC = () => {
  const [current, setCurrent] = useState(3);

  const onChange: PaginationProps['onChange'] = (page) => {
    console.log(page);
    setCurrent(page);
  };

  return <Pagination current={current} onChange={onChange} total={50} />;
};

export default App;
  • Total 85 items
  • 1
  • 2
  • 3
  • 4
  • 5
  • 20 条/页

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

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Pagination } from 'antd';

const App: React.FC = () => (
  <>
    <Pagination
      total={85}
      showTotal={(total) => `Total ${total} items`}
      defaultPageSize={20}
      defaultCurrent={1}
    />
    <br />
    <Pagination
      total={85}
      showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
      defaultPageSize={20}
      defaultCurrent={1}
    />
  </>
);

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

展示所有配置选项。

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import { Pagination } from 'antd';

const App: React.FC = () => (
  <Pagination
    total={85}
    showSizeChanger
    showQuickJumper
    showTotal={(total) => `Total ${total} items`}
  />
);

export default App;
  • Previous
  • 1
  • 2
  • 3
  • 4
  • 5
  • •••
  • 50
  • Next
  • 10 条/页
上一步和下一步

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

expand codeexpand code
TypeScript
JavaScript
import React from 'react';
import type { PaginationProps } from 'antd';
import { Pagination } from 'antd';

const itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {
  if (type === 'prev') {
    return <a>Previous</a>;
  }
  if (type === 'next') {
    return <a>Next</a>;
  }
  return originalElement;
};

const App: React.FC = () => <Pagination total={500} itemRender={itemRender} />;

export default App;

API

<Pagination onChange={onChange} total={50} />
参数说明类型默认值版本
current当前页数number-
defaultCurrent默认的当前页数number1
defaultPageSize默认的每页条数number10
disabled禁用分页boolean-
hideOnSinglePage只有一页时是否隐藏分页器booleanfalse
itemRender用于自定义页码的结构，可用于优化 SEO(page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode-
pageSize每页条数number-
pageSizeOptions指定每页可以显示多少条string[][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-
size当为 small 时，是小尺寸分页default | smalldefault
total数据总数number0
onChange页码或 pageSize 改变的回调，参数是改变后的页码及每页条数function(page, pageSize)-
onShowSizeChangepageSize 变化的回调function(current, size)-