ant-design Table 关闭分页完全指南：使用 `pagination={false}` 让表格完整展示数据

ant-design Table 关闭分页完全指南：使用pagination={false}让表格完整展示数据

【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design

在 ant-design 的 Table 组件中，分页是默认行为——只要dataSource传入的数据量超过默认每页条数，表格就会自动截断展示。但在管理后台的"详情列表"、"配置预览"、对话框内的小型表格等场景中，我们往往希望数据一次性全部展示，此时只需传入pagination={false}即可彻底关闭分页。本文基于 ant-design 仓库中的 components/table/demo/nopagination.md 官方示例展开，结合 components/table/index.jsx 源码，深入讲解关闭分页的正确姿势、底层实现原理，以及它与其他表格特性的协同方式，读完即可在实际项目中直接落地。

什么时候需要关闭分页

官方 Table 文档 components/table/index.md 给出的使用建议是：当有大量结构化数据需要展现，或需要对数据进行排序、搜索、分页、自定义操作等复杂行为时使用 Table。但在以下情况，分页反而会成为累赘：

• 数据量固定且有限：例如配置项列表、权限清单、成员名册，数据只有几条到几十条，分页器占用空间且无意义；
• 需要全量对照/导出：运营或审核场景需要一眼看到所有行，翻页会打断比对；
• 嵌入式小表格：对话框、抽屉、卡片内嵌表格空间有限，应把空间留给数据本身；
• 数据已由服务端裁剪：后端已按条件返回完整结果集，前端无需再做分页截断。

此时pagination={false}就是官方推荐的关闭方式。在 nopagination 示例中，3 条数据一次性完整渲染，没有任何分页器出现。

基础用法：一行代码关闭分页

官方示例 components/table/demo/nopagination.md 给出了最小可运行代码，核心只有一处：给 Table 传入pagination={false}。

import { Table } from 'antd'; const columns = [{ title: '姓名', dataIndex: 'name' }, { title: '年龄', dataIndex: 'age' }, { title: '住址', dataIndex: 'address' }]; const data = [{ key: '1', name: '胡彦斌', age: 32, address: '西湖区湖底公园1号' }, { key: '2', name: '胡彦祖', age: 42, address: '西湖区湖底公园1号' }, { key: '3', name: '李大嘴', age: 32, address: '西湖区湖底公园1号' }]; ReactDOM.render(<Table columns={columns} dataSource={data} pagination={false} /> , mountNode);

要点说明：

• columns中的每项由title（列头文字）和dataIndex（列数据在数据项中对应的 key）组成，与dataSource中的字段一一对应；
• dataSource中每个数据对象都必须提供key字段作为行的唯一标识（详见下文注意事项）；
• 与 components/table/demo/paging.md 中传入分页配置对象pagination={{...}}不同，这里传入布尔值false，语义为"完全禁用分页能力"。

从 API 文档来看，pagination参数的定义正是：分页器，配置项参考 pagination 组件，设为 false 时不显示分页（见 components/table/index.md 的 Table API 表格）。传入false是官方明确支持的取值。

源码剖析：pagination={false}在底层发生了什么

关闭分页并不是简单地"隐藏分页器"，而是从数据切片、状态初始化和渲染三个阶段同时生效。阅读 components/table/index.jsx 可以完整还原这一过程。

1. 判定入口：hasPagination()

组件通过一个统一的判定函数来决定是否启用分页（components/table/index.jsx）：

hasPagination() { return this.props.pagination !== false; },

这是整个关闭逻辑的"总开关"：只要pagination不等于false（即缺省或传入了配置对象），就认为需要分页。

2. 初始化：不产生分页状态

在getInitialState()中（components/table/index.jsx），组件会根据hasPagination()决定是否初始化分页状态：

pagination: this.hasPagination() ? objectAssign({ size: this.props.size, }, defaultPagination, this.props.pagination) : {},

当传入pagination={false}时，分页状态被初始化为空对象{}，不会混入默认分页配置。默认分页配置定义在同文件顶部（components/table/index.jsx）：

const defaultPagination = { pageSize: 10, current: 1, onChange: noop, onShowSizeChange: noop, };

也就是说，默认情况下 Table 每页展示 10 条数据（pageSize: 10），这也是为什么数据超过 10 条时表格会自动分页的原因。关闭分页后，这个默认的 10 条上限被彻底绕过。

3. 数据切片：pageSize 放大到最大值

getCurrentPageData()是数据渲染前的最后一道关卡（components/table/index.jsx），它决定当前页实际渲染哪些行：

getCurrentPageData() { let data = this.getLocalData(); let current; let pageSize; let state = this.state; // 如果没有分页的话，默认全部展示 if (!this.hasPagination()) { pageSize = Number.MAX_VALUE; current = 1; } else { pageSize = state.pagination.pageSize; current = state.pagination.current; } // 分页 // --- // 当数据量少于等于每页数量时，直接设置数据 // 否则进行读取分页数据 if (data.length > pageSize || pageSize === Number.MAX_VALUE) { data = data.filter((item, i) => { return i >= (current - 1) * pageSize && i < current * pageSize; }); } return data; }

关键逻辑清晰可见：

• 关闭分页时，pageSize被赋值为Number.MAX_VALUE（JavaScript 能表示的最大数值），current固定为 1；
• 切片过滤条件i >= (current - 1) * pageSize && i < current * pageSize在pageSize = Number.MAX_VALUE时等价于i >= 0 && i < 无穷大，即全部数据都通过过滤；
• 注释直接写明："如果没有分页的话，默认全部展示"。

因此无论dataSource中有多少条数据，都会被完整交给底层的 rc-table 渲染，不会发生任何截断。

4. 渲染阶段：分页器返回 null

renderPagination()是分页器 DOM 的出口（components/table/index.jsx）：

renderPagination() { // 强制不需要分页 if (!this.hasPagination()) { return null; } ... return (total > 0) ? <Pagination {...this.state.pagination} className={classString} onChange={this.handlePageChange} total={total} pageSize={pageSize} onShowSizeChange={this.handleShowSizeChange} /> : null; }

当pagination={false}时，函数在第一行就直接return null，根本不会渲染分页器组件——这不是用 CSS 隐藏，而是从 DOM 层面彻底移除。反观开启分页时，表格底部会渲染ant-table-pagination分页器（该分页器由 components/pagination/index.jsx 对 rc-pagination 封装而来），其样式定义在 style/components/table.less：

.@{table-prefix-cls}-pagination { margin: 16px 0; float: right; }

关闭分页后这段样式对应的 DOM 不存在，也就不会有这 16px 的上边距和右浮动布局。

关闭分页后的视觉与布局细节

loading 状态的间距修正

pagination={false}还会影响表格加载中（loading）状态下 Spin 加载指示器的定位。在render()方法中（components/table/index.jsx），组件会根据分页状态为 Spin 容器选择不同的类名：

const paginationPatchClass = (this.hasPagination() && data && data.length !== 0) ? 'ant-table-with-pagination' : 'ant-table-without-pagination';

对应的样式在 style/components/table.less：

.@{table-prefix-cls}-with-pagination { margin-top: -20px; } .@{table-prefix-cls}-without-pagination { margin-top: 10px; }

因为开启分页时表格底部多出一块分页器区域，加载指示器需要上移 20px 来抵消；关闭分页后没有这块区域，则改为下移 10px。两者 margin 方向相反，正是为了在不同分页状态下让 Spin 始终垂直居中于表格区域。从源码结构看，这保证了关闭分页后加载动画的定位依然精准。

完整展示 vs 每页 10 条

对比两个官方 demo 可以直观感受差异：

• components/table/demo/nopagination.md：3 条数据，无分页器，全部渲染；
• components/table/demo/paging.md：用循环生成 46 条数据（for (let i = 0; i < 46; i++)），传入分页配置对象，展示分页器，并可通过showSizeChanger: true切换每页条数。

在 paging 示例中，onChange与onShowSizeChange回调分别打印当前页码和页码/页大小；而关闭分页后，这两类回调将永远不会触发（因为分页器不存在，handlePageChange也不会被调用）。如果你的业务逻辑依赖分页回调收集数据，关闭分页后需要改为直接使用完整dataSource。

关闭分页后与其他特性的协同

关闭分页只影响分页能力，Table 的其他能力全部照常工作。以官方其他 demo 为参照：

• 行选择（rowSelection）：参考 components/table/demo/row-selection.md，rowSelection的选中逻辑基于"当前页数据"（getFlatCurrentPageData()）。关闭分页后当前页即全部数据，因此"全选"就等同于选择整个数据集，onChange(selectedRowKeys, selectedRows)返回的行数组是完整列表——这在需要一次性批量操作的场景下反而更符合直觉；
• 排序与筛选：参考 components/table/index.jsx 的getLocalData()，本地排序（column.sorter）与筛选（column.filters/onFilter）在分页之前执行，作用于完整dataSource。关闭分页后，排序、筛选结果直接呈现在当前全部行上，无需翻页确认；
• 紧凑尺寸：参考 components/table/demo/size.md，size="middle"或size="small"与pagination={false}组合，非常适合空间有限的对话框内表格；
• 边框与表头：bordered、showHeader、useFixedHeader等参数（见 components/table/index.md API 表）均不受影响。

注意事项

1. 务必提供行 key：官方文档 components/table/index.md 强调，dataSource中的每条数据默认以key属性作为唯一标识。若数据没有key字段，必须通过rowKey指定，否则组件会退化为按索引取值（见 components/table/index.jsx 的getRecordKey），并可能出现各类奇怪错误：

// 比如你的数据主键是 uid return <Table rowKey={record => record.uid} pagination={false} />;

2. 受控与非受控分页状态：当pagination不是false而是配置对象时，组件会在componentWillReceiveProps中合并分页状态（components/table/index.jsx）。传入false则完全跳过该合并逻辑，这也是"关闭"与"配置"两条路径在源码中的明确分界。

3. 数据量极小时分页器自动隐藏：即使不显式传入pagination={false}，renderPagination()中的total > 0判断与getCurrentPageData()的切片逻辑也会让数据少于每页条数时不显示多余分页。但这只适用于少量数据；一旦数据超过 10 条（默认pageSize），分页器就会出现。若要确保任何数据量下都完整展示，显式传入pagination={false}是唯一可靠的方式。

4. onChange 回调的参数：Table 的onChange(pagination, filters, sorter)在分页、排序、筛选变化时触发（components/table/index.jsx）。关闭分页后，分页变化不再可能发生，但排序、筛选变化仍会触发回调，此时第一个参数pagination为空对象{}，实现代码应对此有所容错。

小结

pagination={false}是 ant-design Table 关闭分页的官方标准写法，其背后是hasPagination()判定、空分页状态初始化、pageSize = Number.MAX_VALUE全量切片、renderPagination()返回 null 这四层机制的协同。它适用于数据量固定、需要全量展示或空间受限的表格场景，且与行选择、排序、筛选、紧凑尺寸等特性天然兼容。相关代码与示例均可直接在仓库中查阅：

• 官方示例：components/table/demo/nopagination.md
• 组件实现：components/table/index.jsx
• 分页组件封装：components/pagination/index.jsx
• 表格样式：style/components/table.less
• 分页对照示例：components/table/demo/paging.md

【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design