ant-design Pagination 基础分页使用指南从 basic 示例到完整 API 解析【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-designPagination分页是 ant-design 中用于分隔长列表的核心导航组件核心思路是每次只加载一个页面的数据避免一次性渲染全部数据带来的性能开销。本文以components/pagination/demo/basic.md中的最基础示例为切入点结合组件源码与其余 8 个演示用例系统讲解 Pagination 的最小可用写法、受控/非受控模式、尺寸与跳转等完整 API帮助你在项目中快速落地可复用的分页方案。最小可用示例三行代码完成基础分页components/pagination/demo/basic.md给出了 ant-design Pagination 最精简的用法——只需要传入默认页码和总数两个属性即可渲染出一个完整可交互的分页器import { Pagination } from antd; ReactDOM.render( Pagination defaultCurrent{1} total{50} /, mountNode);该示例对应的完整实现位于 Pagination 组件。从源码看ant-design 的 Pagination 是对第三方rc-pagination的二次封装AntPagination组件内部直接渲染Pagination selectComponentClass{selectComponentClass} selectPrefixClsant-select {...this.props} className{className} /并将默认的locale设为zhCN、prefixCls设为ant-pagination对应样式前缀见 pagination.less。因此defaultCurrent、total等所有对外属性都会透传给rc-pagination由底层完成页码计算与点击交互。在这个示例中defaultCurrent{1}表示初始时停留在第 1 页非受控模式的默认值total{50}表示数据总数为 50 条在未指定pageSize时按默认每页 10 条计算共 5 页点击页码即可切换组件内部自动更新高亮页码无需你维护任何状态。从 basic 到完整用法Pagination 全量 API 解析basic.md只是入口完整的属性定义见 Pagination 文档 的 API 章节。下表即为全部对外可配置参数实际使用时可与上面rc-pagination透传机制相互印证参数说明类型默认值current当前页数Number无defaultCurrent默认的当前页数Number1total数据总数Number0defaultPageSize初始的每页条数Number10pageSize每页条数NumberonChange页码改变的回调参数是改变后的页码FunctionnoopshowSizeChanger是否可以改变 pageSizeBoolfalsepageSizeOptions指定每页可以显示多少条ArrayString[10, 20, 30, 40]onShowSizeChangepageSize 变化的回调FunctionnoopshowQuickJumper是否可以快速跳转至某页Boolfalsesize当为「small」时是小尺寸分页Stringsimple当添加该属性时显示为简单分页Object无showTotal用于显示总共有多少条数据Function无需要特别说明的是current与defaultCurrent的区别在于受控与否传入current时组件变为受控模式页码完全由你通过onChange回调配合setState维护只传defaultCurrent则是非受控模式组件内部自行维护页码状态onChange的回调参数是改变后的页码适合在翻页时同步触发数据请求pageSize未指定时defaultPageSize默认 10生效二者共同决定总页数 total / pageSize向上取整。受控模式用 state 完全接管页码当页面状态需要与路由、表格筛选等其他逻辑联动时应使用受控模式参考 demo/controlled.mdlet 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} /; } });这里current与onChange成对出现形成state 驱动 → 回调更新 → 重新渲染的闭环页码始终与外部状态保持唯一数据源适用于与服务端交互的列表场景。每页条数切换showSizeChanger 与 onShowSizeChange长列表场景常需允许用户自定义每页条数参见 demo/changer.mdfunction onShowSizeChange(current, pageSize) { console.log(current, pageSize); } ReactDOM.render( Pagination showSizeChanger onShowSizeChange{onShowSizeChange} defaultCurrent{3} total{500} /, mountNode);showSizeChanger开启后组件会渲染一个每页条数下拉框选项由pageSizeOptions决定默认[10, 20, 30, 40]该下拉框在 ant-design 封装层中使用 Select 组件 实现源码见 index.jsx 中的MiniSelect当size small时会用小尺寸 Select 替换默认 Select 以保持视觉一致onShowSizeChange(current, pageSize)在 pageSize 变化时触发第一个参数是变化前的当前页。快速跳转showQuickJumper数据量较大、页数较多时逐页点击效率低可开启跳转输入框参考 demo/jump.mdReactDOM.render( Pagination showQuickJumper defaultCurrent{2} total{500} /, mountNode);开启后分页器右侧出现数字输入框输入页码回车即可直达目标页total{500}时按默认每页 10 条共 50 页跳转价值尤为明显。迷你尺寸sizesmall在空间受限的工具栏、卡片页脚等场景可使用迷你尺寸参考 demo/mini.mdfunction 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);从 组件源码 看sizesmall会做两件事一是往className追加mini修饰类二是将每页条数下拉框替换为MiniSelect小尺寸 Select从而在整体和局部都呈现紧凑的迷你观感。迷你模式同样支持showSizeChanger、showQuickJumper、showTotal的组合。简洁模式simple只关心上一页/下一页与当前页码的轻量场景可使用simple属性参考 demo/simple.mdReactDOM.render( Pagination simple defaultCurrent{2} total{50} /, mountNode);简洁模式隐藏了完整的页码序列仅保留当前页/总页数信息与前后翻页按钮适合移动端或极简列表底部。显示数据总数showTotal通过showTotal自定义共 X 条的总数提示文案参考 demo/total.mdimport { Pagination, Select } from antd; function showTotal(total) { return 共 ${total} 条; } ReactDOM.render( Pagination selectComponentClass{Select} total{80} showTotal{showTotal} pageSize{20} defaultCurrent{1} /, mountNode );showTotal接收total数据总数作为参数返回需要展示的字符串可用模板字符串拼接文案该示例还展示了selectComponentClass{Select}的用法——将 ant-design 的 Select 注入分页器的每页条数下拉框这一属性正是 封装层源码 中selectComponentClass透传的体现结合pageSize{20}total{80}时分页器共 4 页适合展示固定分页大小的数据表格。国际化locale 切换语言Pagination 默认输出中文文案切换语言只需传入对应 locale参考 demo/locale.mdimport { Pagination } from antd; import enUS from antd/lib/pagination/locale/en_US; ReactDOM.render( Pagination defaultCurrent{1} total{50} locale{enUS} /, mountNode);默认支持en_US与zh_CN两种语言。从 locale/en_US.js 可以看出ant-design 直接复用了rc-pagination/lib/locale/en_US的语言包zh_CN同理组件的默认 locale 则被封装层设置为zhCN见 index.jsx因此不传locale时默认显示中文。更多页码与大数据量展示当数据量进一步增大时Pagination 会自动折叠多余页码仅显示首尾与当前页附近的部分页码参考 demo/more.mdReactDOM.render( Pagination defaultCurrent{1} total{500} /, mountNode);total{500}按默认每页 10 条共 50 页此时页码过多无法全部平铺组件以省略号...形式折叠中间页点击省略号可向前/向后展开一页保证长列表场景下分页器依然简洁可用。这也是 basic 示例50 条、5 页所看不到的行为差异。实战小结如何按场景选择 Pagination 用法综合以上源码与演示用例可总结出如下选型建议场景推荐配置对应示例最小可用、快速接入defaultCurrenttotalbasic.md与服务端联动、需持久化页码currentonChange受控模式controlled.md允许用户自定义每页条数showSizeChangeronShowSizeChangechanger.md页数多、需快速定位showQuickJumperjump.md空间受限的紧凑界面sizesmallmini.md轻量翻页交互simplesimple.md展示数据总量showTotaltotal.md多语言站点locale{enUS}等locale.md所有用法均可组合使用如sizesmall与showQuickJumper、showSizeChanger同时开启且最终属性都会透传给rc-pagination底层实现样式统一由 ant-pagination 前缀 下的 pagination.less 控制。建议实际项目中优先采用受控模式管理页码将分页状态与表格数据请求、URL 查询参数保持同步即可获得清晰、可维护的列表分页体验。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考