Pagination分页

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

何时使用

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

代码演示

基础分页。

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 条/页

更多分页。

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 条/页

改变

改变每页显示条目数。

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 条/页
跳至页

跳转

快速跳转到某一页。

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
10 条/页
跳至页

Total 50 items
1
2
3
4
5

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

迷你

迷你版本。

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;
}

简洁

简单的翻页。

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;

受控

受控制的页码。

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 展示总共有多少数据。

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 条/页
跳至页

全部展示

展示所有配置选项。

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 条/页

上一步和下一步

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

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	默认的当前页数	number	1
defaultPageSize	默认的每页条数	number	10
disabled	禁用分页	boolean	-
hideOnSinglePage	只有一页时是否隐藏分页器	boolean	false
itemRender	用于自定义页码的结构，可用于优化 SEO	(page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode	-
pageSize	每页条数	number	-
pageSizeOptions	指定每页可以显示多少条	string[] \| number[]	[`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)	-

Design Token

Global Token

Token 名称	描述	类型	默认值
colorBgContainer	组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。	string	#ffffff
colorBgContainerDisabled	控制容器在禁用状态下的背景色。	string	rgba(0, 0, 0, 0.04)
colorBgTextActive	控制文本在激活状态下的背景色。	string	rgba(0, 0, 0, 0.15)
colorBgTextHover	控制文本在悬停状态下的背景色。	string	rgba(0, 0, 0, 0.06)
colorBorder	默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。	string	#d9d9d9
colorPrimary	品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义	string	#1677ff
colorPrimaryBorder	主色梯度下的描边用色，用在 Slider 等组件的描边上。	string	#91caff
colorPrimaryHover	主色梯度下的悬浮态。	string	#4096ff
colorText	最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。	string	rgba(0, 0, 0, 0.88)
colorTextDisabled	控制禁用状态下的字体颜色。	string	rgba(0, 0, 0, 0.25)
colorTextPlaceholder	控制占位文本的颜色。	string	rgba(0, 0, 0, 0.25)
borderRadius	基础组件的圆角大小，例如按钮、输入框、卡片等	number	6
borderRadiusLG	LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。	number	8
borderRadiusSM	SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角	number	4
controlHeight	Ant Design 中按钮和输入框等基础控件的高度	number	32
controlHeightLG	较高的组件高度	number	40
controlHeightSM	较小的组件高度	number	24
controlItemBgActiveDisabled	控制组件项在禁用状态下的激活背景颜色。	string	rgba(0, 0, 0, 0.15)
controlOutline	控制输入组件的外轮廓线颜色。	string	rgba(5, 145, 255, 0.1)
controlOutlineWidth	控制输入组件的外轮廓线宽度。	number	2
controlPaddingHorizontal	控制元素水平内间距。	number	12
controlPaddingHorizontalSM	控制元素中小尺寸水平内间距。	number	8
fontFamily	Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。	number	14
fontSizeLG	大号字体大小	number	16
fontSizeSM	小号字体大小	number	12
fontWeightStrong	控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。	number	600
lineHeight	文本行高	number	1.5714285714285714
lineHeightLG	大型文本行高	number	1.5
lineType	用于控制组件边框、分割线等的样式，默认是实线	string	solid
lineWidth	用于控制组件边框、分割线等的宽度	number	1
lineWidthFocus	控制线条的宽度，当组件处于聚焦态时。	number	4
margin	控制元素外边距，中等尺寸。	number	16
marginSM	控制元素外边距，中小尺寸。	number	12
marginXS	控制元素外边距，小尺寸。	number	8
marginXXS	控制元素外边距，最小尺寸。	number	4
motionDurationMid	动效播放速度，中速。用于中型元素动画交互	string	0.2s
motionDurationSlow	动效播放速度，慢速。用于大型元素如面板动画交互	string	0.3s
paddingSM	控制元素的小内间距。	number	12
paddingXS	控制元素的特小内间距。	number	8
paddingXXS	控制元素的极小内间距。	number	4
screenLG	控制大屏幕的屏幕宽度。	number	992
screenSM	控制小屏幕的屏幕宽度。	number	576
wireframe	用于将组件的视觉效果变为线框化，如果需要使用 V4 的效果，需要开启配置项	boolean	false

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;

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;

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;

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;

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;

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;

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;

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	默认的当前页数	number	1
defaultPageSize	默认的每页条数	number	10
disabled	禁用分页	boolean	-
hideOnSinglePage	只有一页时是否隐藏分页器	boolean	false
itemRender	用于自定义页码的结构，可用于优化 SEO	(page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode	-
pageSize	每页条数	number	-
pageSizeOptions	指定每页可以显示多少条	string[] \| number[]	[`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)	-

Token 名称

描述

类型

默认值

colorBgContainer

组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。

string

#ffffff

colorBgContainerDisabled

控制容器在禁用状态下的背景色。

string

rgba(0, 0, 0, 0.04)

colorBgTextActive

控制文本在激活状态下的背景色。

string

rgba(0, 0, 0, 0.15)

colorBgTextHover

控制文本在悬停状态下的背景色。

string

rgba(0, 0, 0, 0.06)

colorBorder

默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。

string

#d9d9d9

colorPrimary

品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义

string

#1677ff

colorPrimaryBorder

主色梯度下的描边用色，用在 Slider 等组件的描边上。

string

#91caff

colorPrimaryHover

主色梯度下的悬浮态。

string

#4096ff

colorText

最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。

string

rgba(0, 0, 0, 0.88)

colorTextDisabled

控制禁用状态下的字体颜色。

string

rgba(0, 0, 0, 0.25)

colorTextPlaceholder

控制占位文本的颜色。

string

rgba(0, 0, 0, 0.25)

borderRadius

基础组件的圆角大小，例如按钮、输入框、卡片等

number

borderRadiusLG

LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。

number

borderRadiusSM

SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角

number

controlHeight

Ant Design 中按钮和输入框等基础控件的高度

number

controlHeightLG

较高的组件高度

number

controlHeightSM

较小的组件高度

number

controlItemBgActiveDisabled

控制组件项在禁用状态下的激活背景颜色。

string

rgba(0, 0, 0, 0.15)

controlOutline

控制输入组件的外轮廓线颜色。

string

rgba(5, 145, 255, 0.1)

controlOutlineWidth

控制输入组件的外轮廓线宽度。

number

controlPaddingHorizontal

控制元素水平内间距。

number

controlPaddingHorizontalSM

控制元素中小尺寸水平内间距。

number

fontFamily

Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。

string

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'

fontSize

设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。

number

fontSizeLG

大号字体大小

number

fontSizeSM

小号字体大小

number

fontWeightStrong

控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。

number

600

lineHeight

文本行高

number

1.5714285714285714

lineHeightLG

大型文本行高

number

1.5

lineType

用于控制组件边框、分割线等的样式，默认是实线

string

solid

lineWidth

用于控制组件边框、分割线等的宽度

number

lineWidthFocus

控制线条的宽度，当组件处于聚焦态时。

number

margin

控制元素外边距，中等尺寸。

number

marginSM

控制元素外边距，中小尺寸。

number

marginXS

控制元素外边距，小尺寸。

number

marginXXS

控制元素外边距，最小尺寸。

number

motionDurationMid

动效播放速度，中速。用于中型元素动画交互

string

0.2s

motionDurationSlow

动效播放速度，慢速。用于大型元素如面板动画交互

string

0.3s

paddingSM

控制元素的小内间距。

number

paddingXS

控制元素的特小内间距。

number

paddingXXS

控制元素的极小内间距。

number

screenLG

控制大屏幕的屏幕宽度。

number

992

screenSM

控制小屏幕的屏幕宽度。

number

576

wireframe

用于将组件的视觉效果变为线框化，如果需要使用 V4 的效果，需要开启配置项

boolean

false