Ant Design Pagination 分页组件完全指南从基础用法到源码实现原理【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design导读本文以 ant-design 仓库中 Pagination 分页组件文档 为核心结合组件源码与全部 9 个官方示例系统讲解分页组件的使用时机、全部 API 参数、受控与非受控用法、迷你/简洁/跳转/总数展示等实战场景并深入到rc-pagination的底层实现与 antd 的封装细节帮助你在长列表数据渲染场景中正确选择、配置与扩展分页方案。为什么需要分页当页面需要展示的数据量很大时一次性加载或渲染全部数据会带来明显的性能开销与糟糕的交互体验。Pagination 采用分页的形式分隔长列表每次只加载一个页面用户通过切换页码浏览数据。根据官方文档分页的适用场景非常明确当加载/渲染所有数据将花费很多时间时当用户需要可切换页码来浏览数据时。这与 表格组件 的分页、列表模式设计文档 中关于大量数据展示的实践一脉相承是长列表数据展示的标准解决方案。快速上手最小可运行示例最简单的分页只需要传入数据总数即可工作Pagination onChange{onChange} total{50} /对应到仓库中的 基础示例默认从第 1 页开始展示import { Pagination } from antd; ReactDOM.render( Pagination defaultCurrent{1} total{50} /, mountNode);当total较大时例如 更多分页示例 中的 500 条数据组件会自动折叠中间页面的编号用省略号ellipsis代替避免页码条过长import { Pagination } from antd; ReactDOM.render( Pagination defaultCurrent{1} total{500} /, mountNode);API 参数详解Pagination 的核心 API 全部定义在文档的 API 表格中。它本质上是 antd 对rc-pagination的一层封装见 index.jsx所有参数最终透传给底层组件同时附加了 antd 自己的Select下拉组件用于切换每页条数。下面逐一讲解每个参数。页码相关current 与 defaultCurrent参数说明类型默认值current当前页数Number无defaultCurrent默认的当前页数Number1defaultCurrent是非受控用法下的初始页码。不传任何页码相关属性时组件内部默认从第 1 页开始current是受控属性。一旦传入current页码就完全由外部状态决定页码的跳转必须通过onChange回调更新状态来完成详见下文受控分页小节。数据量相关total、defaultPageSize 与 pageSize参数说明类型默认值total数据总数Number0defaultPageSize初始的每页条数Number10pageSize每页条数Number无total是必传的关键属性组件依据它与pageSize计算总页数defaultPageSize为非受控方式指定初始每页条数默认 10 条pageSize为受控属性用于外部完全控制每页条数例如与每页条数选择器联动。回调函数onChange 与 onShowSizeChange参数说明类型默认值onChange页码改变的回调参数是改变后的页码FunctionnooponShowSizeChangepageSize 变化的回调FunctionnooponChange(page)在用户切换页码时触发参数为改变后的页码onShowSizeChange(current, size)在每页条数改变时触发同时接收当前页码与新的每页条数两个参数。二者配合即可在分页变化后重新向后端发起数据请求。每页条数选择器showSizeChanger 与 pageSizeOptions参数说明类型默认值showSizeChanger是否可以改变 pageSizeBoolfalsepageSizeOptions指定每页可以显示多少条ArrayString[10, 20, 30, 40]开启showSizeChanger后分页器右侧会出现一个下拉选择器允许用户调整每页条数可选项由pageSizeOptions控制默认提供 10/20/30/40 四个档位。这里有一个值得注意的源码细节antd 在封装时专门为小尺寸分页准备了MiniSelect用sizesmall的 Select 替换默认的 Select见 index.jsx使选择器与迷你分页的视觉尺寸保持一致。快捷跳转showQuickJumper参数说明类型默认值showQuickJumper是否可以快速跳转至某页Boolfalse开启后分页器尾部出现输入框用户直接输入页码即可快速跳转适用于数据量大的场景。完整用法见 跳转示例import { Pagination } from antd; ReactDOM.render( Pagination showQuickJumper defaultCurrent{2} total{500} /, mountNode);尺寸与形态size、simple 与 showTotal参数说明类型默认值size当为「small」时是小尺寸分页Stringsimple当添加该属性时显示为简单分页Object无showTotal用于显示总共有多少条数据Function无sizesmall输出迷你分页。在 index.jsx 中可以看到小尺寸会给className追加mini标记同时切换为MiniSelect选择器样式上由 style/components/pagination.less 中的.ant-pagination.mini规则支撑simple是布尔属性文档标注类型为 Object实为添加即生效的标志性属性渲染为只有上一页/下一页 当前页/总页数的极简形态适合移动端或空间受限的场景showTotal(total, range)接收数据总数以及可能的页码范围用于在分页器左侧展示共 xx 条之类的统计信息。国际化locale仓库中 locale/zh_CN.js 与 locale/en_US.js 直接复用rc-pagination/lib/locale下的对应语言包组件默认注入zh_CN见 index.jsx。切换语言只需通过locale属性传入对应语言包即可见 国际化示例import { Pagination } from antd; import enUS from antd/lib/pagination/locale/en_US; ReactDOM.render( Pagination defaultCurrent{1} total{50} locale{enUS} /, mountNode);经典实战场景场景一受控分页当页码需要与其他组件如表格数据、路由参数保持同步时应使用受控模式。核心是外部状态 onChange 回写见 受控示例import { Pagination } from antd; let Container React.createClass({ getInitialState() { return { current: 3 }; }, onChange(page) { console.log(page); this.setState({ current: page }); }, render() { return Pagination current{this.state.current} onChange{this.onChange} total{50} /; } }); ReactDOM.render( Container /, mountNode);注意受控模式下若不通过onChange更新current点击页码不会产生任何视觉变化页码完全由传入的current决定。场景二切换每页条数开启showSizeChanger并监听onShowSizeChange即可在用户切换每页条数后重新获取数据见 改变示例import { Pagination } from antd; function onShowSizeChange(current, pageSize) { console.log(current, pageSize); } ReactDOM.render( Pagination showSizeChanger onShowSizeChange{onShowSizeChange} defaultCurrent{3} total{500} /, mountNode);场景三迷你分页在卡片、侧边栏等紧凑布局中推荐使用sizesmall并与showSizeChanger、showQuickJumper、showTotal自由组合见 迷你示例import { Pagination } from antd; function showTotal(total) { return 共 ${total} 条; } ReactDOM.render(div Pagination sizesmall total{50} / br / Pagination sizesmall total{50} showSizeChanger showQuickJumper / br / Pagination sizesmall total{50} showTotal{showTotal} / /div, mountNode);场景四简洁分页simple属性适合空间有限或强调极简交互的场景见 简洁示例import { Pagination } from antd; ReactDOM.render( Pagination simple defaultCurrent{2} total{50} /, mountNode);场景五展示数据总数通过showTotal在分页器左侧展示数据总量。该示例还演示了自定义selectComponentClass将每页条数选择器替换为自定义 Select 的扩展方式见 总数示例import { Pagination, Select } from antd; function showTotal(total) { return 共 ${total} 条; } ReactDOM.render( Pagination selectComponentClass{Select} total{80} showTotal{showTotal} pageSize{20} defaultCurrent{1} /, mountNode );源码实现原理antd 封装层components/pagination/index.jsx 是 antd 对rc-pagination的全部封装逻辑核心只有几十行定义一个MiniSelect内部类继承 antd 的 Select 并固定sizesmall第 6-12 行AntPagination渲染时根据size small决定使用普通 Select 还是 MiniSelect第 19-22 行将selectPrefixClsant-select与传入的 props 一并透传给rc-pagination第 24-28 行通过defaultProps注入默认的zh_CNlocale、空className与ant-pagination前缀第 33-37 行。也就是说antd 的 Pagination 与底层rc-pagination是薄封装关系交互逻辑、页码计算、省略号折叠等全部由rc-pagination完成antd 负责接入自己的 Select 组件与样式前缀体系并通过 style/components/pagination.less 提供视觉样式。底层渲染与样式分页条通常由上一页/下一页按钮、页码数字、省略号、快速跳转输入框、每页条数选择器、总数文案几部分组成这些区域的样式均定义在 style/components/pagination.less 中迷你尺寸通过.mini类名生效。如果需要在项目中覆盖分页样式可以从ant-pagination前缀入手进行定制。与表格组件的搭配在实际业务中分页最常见的落地场景是与 Table 表格组件 配合通过受控current/pageSize与onChange/onShowSizeChange实现服务端分页即每次翻页携带页码参数请求新数据。这也是 docs/pattern/complex-table.md 等设计模式文档中反复强调的复杂表格实践将分页状态提升到页面容器数据请求与分页状态解耦。小结最小用法只需total一个属性antd 会基于defaultPageSize 10自动生成页码条掌握受控current/pageSize与非受控defaultCurrent/defaultPageSize两套用法服务端分页推荐受控模式showSizeChanger、showQuickJumper、simple、sizesmall、showTotal五个开关覆盖了绝大多数产品形态需求源码层面 antd 对rc-pagination是薄封装index.jsx 中 MiniSelect 的适配与默认 zh_CN locale 注入值得在定制分页时参考。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Ant Design Pagination 分页组件完全指南：从基础用法到源码实现原理
Ant Design Pagination 分页组件完全指南从基础用法到源码实现原理【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design导读本文以 ant-design 仓库中 Pagination 分页组件文档 为核心结合组件源码与全部 9 个官方示例系统讲解分页组件的使用时机、全部 API 参数、受控与非受控用法、迷你/简洁/跳转/总数展示等实战场景并深入到rc-pagination的底层实现与 antd 的封装细节帮助你在长列表数据渲染场景中正确选择、配置与扩展分页方案。为什么需要分页当页面需要展示的数据量很大时一次性加载或渲染全部数据会带来明显的性能开销与糟糕的交互体验。Pagination 采用分页的形式分隔长列表每次只加载一个页面用户通过切换页码浏览数据。根据官方文档分页的适用场景非常明确当加载/渲染所有数据将花费很多时间时当用户需要可切换页码来浏览数据时。这与 表格组件 的分页、列表模式设计文档 中关于大量数据展示的实践一脉相承是长列表数据展示的标准解决方案。快速上手最小可运行示例最简单的分页只需要传入数据总数即可工作Pagination onChange{onChange} total{50} /对应到仓库中的 基础示例默认从第 1 页开始展示import { Pagination } from antd; ReactDOM.render( Pagination defaultCurrent{1} total{50} /, mountNode);当total较大时例如 更多分页示例 中的 500 条数据组件会自动折叠中间页面的编号用省略号ellipsis代替避免页码条过长import { Pagination } from antd; ReactDOM.render( Pagination defaultCurrent{1} total{500} /, mountNode);API 参数详解Pagination 的核心 API 全部定义在文档的 API 表格中。它本质上是 antd 对rc-pagination的一层封装见 index.jsx所有参数最终透传给底层组件同时附加了 antd 自己的Select下拉组件用于切换每页条数。下面逐一讲解每个参数。页码相关current 与 defaultCurrent参数说明类型默认值current当前页数Number无defaultCurrent默认的当前页数Number1defaultCurrent是非受控用法下的初始页码。不传任何页码相关属性时组件内部默认从第 1 页开始current是受控属性。一旦传入current页码就完全由外部状态决定页码的跳转必须通过onChange回调更新状态来完成详见下文受控分页小节。数据量相关total、defaultPageSize 与 pageSize参数说明类型默认值total数据总数Number0defaultPageSize初始的每页条数Number10pageSize每页条数Number无total是必传的关键属性组件依据它与pageSize计算总页数defaultPageSize为非受控方式指定初始每页条数默认 10 条pageSize为受控属性用于外部完全控制每页条数例如与每页条数选择器联动。回调函数onChange 与 onShowSizeChange参数说明类型默认值onChange页码改变的回调参数是改变后的页码FunctionnooponShowSizeChangepageSize 变化的回调FunctionnooponChange(page)在用户切换页码时触发参数为改变后的页码onShowSizeChange(current, size)在每页条数改变时触发同时接收当前页码与新的每页条数两个参数。二者配合即可在分页变化后重新向后端发起数据请求。每页条数选择器showSizeChanger 与 pageSizeOptions参数说明类型默认值showSizeChanger是否可以改变 pageSizeBoolfalsepageSizeOptions指定每页可以显示多少条ArrayString[10, 20, 30, 40]开启showSizeChanger后分页器右侧会出现一个下拉选择器允许用户调整每页条数可选项由pageSizeOptions控制默认提供 10/20/30/40 四个档位。这里有一个值得注意的源码细节antd 在封装时专门为小尺寸分页准备了MiniSelect用sizesmall的 Select 替换默认的 Select见 index.jsx使选择器与迷你分页的视觉尺寸保持一致。快捷跳转showQuickJumper参数说明类型默认值showQuickJumper是否可以快速跳转至某页Boolfalse开启后分页器尾部出现输入框用户直接输入页码即可快速跳转适用于数据量大的场景。完整用法见 跳转示例import { Pagination } from antd; ReactDOM.render( Pagination showQuickJumper defaultCurrent{2} total{500} /, mountNode);尺寸与形态size、simple 与 showTotal参数说明类型默认值size当为「small」时是小尺寸分页Stringsimple当添加该属性时显示为简单分页Object无showTotal用于显示总共有多少条数据Function无sizesmall输出迷你分页。在 index.jsx 中可以看到小尺寸会给className追加mini标记同时切换为MiniSelect选择器样式上由 style/components/pagination.less 中的.ant-pagination.mini规则支撑simple是布尔属性文档标注类型为 Object实为添加即生效的标志性属性渲染为只有上一页/下一页 当前页/总页数的极简形态适合移动端或空间受限的场景showTotal(total, range)接收数据总数以及可能的页码范围用于在分页器左侧展示共 xx 条之类的统计信息。国际化locale仓库中 locale/zh_CN.js 与 locale/en_US.js 直接复用rc-pagination/lib/locale下的对应语言包组件默认注入zh_CN见 index.jsx。切换语言只需通过locale属性传入对应语言包即可见 国际化示例import { Pagination } from antd; import enUS from antd/lib/pagination/locale/en_US; ReactDOM.render( Pagination defaultCurrent{1} total{50} locale{enUS} /, mountNode);经典实战场景场景一受控分页当页码需要与其他组件如表格数据、路由参数保持同步时应使用受控模式。核心是外部状态 onChange 回写见 受控示例import { Pagination } from antd; let Container React.createClass({ getInitialState() { return { current: 3 }; }, onChange(page) { console.log(page); this.setState({ current: page }); }, render() { return Pagination current{this.state.current} onChange{this.onChange} total{50} /; } }); ReactDOM.render( Container /, mountNode);注意受控模式下若不通过onChange更新current点击页码不会产生任何视觉变化页码完全由传入的current决定。场景二切换每页条数开启showSizeChanger并监听onShowSizeChange即可在用户切换每页条数后重新获取数据见 改变示例import { Pagination } from antd; function onShowSizeChange(current, pageSize) { console.log(current, pageSize); } ReactDOM.render( Pagination showSizeChanger onShowSizeChange{onShowSizeChange} defaultCurrent{3} total{500} /, mountNode);场景三迷你分页在卡片、侧边栏等紧凑布局中推荐使用sizesmall并与showSizeChanger、showQuickJumper、showTotal自由组合见 迷你示例import { Pagination } from antd; function showTotal(total) { return 共 ${total} 条; } ReactDOM.render(div Pagination sizesmall total{50} / br / Pagination sizesmall total{50} showSizeChanger showQuickJumper / br / Pagination sizesmall total{50} showTotal{showTotal} / /div, mountNode);场景四简洁分页simple属性适合空间有限或强调极简交互的场景见 简洁示例import { Pagination } from antd; ReactDOM.render( Pagination simple defaultCurrent{2} total{50} /, mountNode);场景五展示数据总数通过showTotal在分页器左侧展示数据总量。该示例还演示了自定义selectComponentClass将每页条数选择器替换为自定义 Select 的扩展方式见 总数示例import { Pagination, Select } from antd; function showTotal(total) { return 共 ${total} 条; } ReactDOM.render( Pagination selectComponentClass{Select} total{80} showTotal{showTotal} pageSize{20} defaultCurrent{1} /, mountNode );源码实现原理antd 封装层components/pagination/index.jsx 是 antd 对rc-pagination的全部封装逻辑核心只有几十行定义一个MiniSelect内部类继承 antd 的 Select 并固定sizesmall第 6-12 行AntPagination渲染时根据size small决定使用普通 Select 还是 MiniSelect第 19-22 行将selectPrefixClsant-select与传入的 props 一并透传给rc-pagination第 24-28 行通过defaultProps注入默认的zh_CNlocale、空className与ant-pagination前缀第 33-37 行。也就是说antd 的 Pagination 与底层rc-pagination是薄封装关系交互逻辑、页码计算、省略号折叠等全部由rc-pagination完成antd 负责接入自己的 Select 组件与样式前缀体系并通过 style/components/pagination.less 提供视觉样式。底层渲染与样式分页条通常由上一页/下一页按钮、页码数字、省略号、快速跳转输入框、每页条数选择器、总数文案几部分组成这些区域的样式均定义在 style/components/pagination.less 中迷你尺寸通过.mini类名生效。如果需要在项目中覆盖分页样式可以从ant-pagination前缀入手进行定制。与表格组件的搭配在实际业务中分页最常见的落地场景是与 Table 表格组件 配合通过受控current/pageSize与onChange/onShowSizeChange实现服务端分页即每次翻页携带页码参数请求新数据。这也是 docs/pattern/complex-table.md 等设计模式文档中反复强调的复杂表格实践将分页状态提升到页面容器数据请求与分页状态解耦。小结最小用法只需total一个属性antd 会基于defaultPageSize 10自动生成页码条掌握受控current/pageSize与非受控defaultCurrent/defaultPageSize两套用法服务端分页推荐受控模式showSizeChanger、showQuickJumper、simple、sizesmall、showTotal五个开关覆盖了绝大多数产品形态需求源码层面 antd 对rc-pagination是薄封装index.jsx 中 MiniSelect 的适配与默认 zh_CN locale 注入值得在定制分页时参考。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考