### 将 Ant Design 的
Pagination 组件与 Table 组件进行关联
在 React 中使用 Ant Design 时，可以通过 `Table` 组件的 `
pagination` 属性将 `
Pagination`
分页组件与表格进行关联。通过该属性，可以实现
分页控件的显示、
分页逻辑的联动以及数据的动态加载。
#### 配置 `
pagination` 属性实现
分页联动
`Table` 组件默认支持
分页功能，并通过 `
pagination` 属性控制
分页控件的配置。通过设置 `current`、`pageSize` 和 `total` 属性，可以实现
分页控件与表格数据的同步。例如：
```jsx
import { Table } from '
antd';
const CustomTable = ({ dataSource, total, current, pageSize, onPageChange }) => {
const
pagination = {
current,
pageSize,
total,
onChange: onPageChange
};
return (
<Table
columns={[
{ title: 'ID', dataIndex: 'id' },
{ title: '名称', dataIndex: 'name' }
]}
dataSource={dataSource}
pagination={
pagination}
/>
);
};
```
此配置通过 `onChange` 回调函数实现
分页控件与表格数据的联动，当用户切换页码时，会触发相应的数据更新操作 [^2]。
#### 自定义
分页控件的显示与行为
可以通过 `itemRender` 函数对
分页按钮的渲染方式进行自定义。例如，使用图标替换默认的按钮样式：
```jsx
import { Table } from '
antd';
import { LeftOutlined, RightOutlined } from '@ant
-design/icons';
const CustomTable = ({ dataSource, total, current, pageSize, onPageChange }) => {
const
pagination = {
current,
pageSize,
total,
itemRender: (page, type, originalElement) => {
if (type === 'prev') {
return <a><LeftOutlined /></a>;
}
if (type === 'next') {
return <a><RightOutlined /></a>;
}
return originalElement;
},
onChange: onPageChange
};
return (
<Table
columns={[
{ title: 'ID', dataIndex: 'id' },
{ title: '名称', dataIndex: 'name' }
]}
dataSource={dataSource}
pagination={
pagination}
/>
);
};
```
通过 `itemRender` 函数，可以灵活地控制
分页控件的每一项渲染方式，从而实现更个性化的样式 [^2]。
#### 禁用默认
分页并手动控制
如果需要禁用 `Table` 组件自带的
分页功能，可以通过设置 `
pagination={false}` 来实现。例如：
```jsx
<Table
columns={columns}
dataSource={list}
rowKey={(item) => item._id + Date.now()}
pagination={false}
/>
```
这种方式适用于需要完全自定义
分页逻辑的场景，例如将 `
Pagination` 组件单独放置在页面的其他位置 [^1]。
#### 结合 `showTotal` 显示
分页信息
可以通过 `showTotal` 属性在
分页控件中显示当前页的数据范围和总数据量。例如：
```jsx
const
pagination = {
current,
pageSize,
total,
showTotal: (total, range) => `${range[0]}
-${range[1]} 共 ${total} 条`
};
```
此方式可以在
分页控件中
展示更详细的
分页信息，提升用户体验 。
#### 通过 CSS 覆盖默认样式
如果需要对
分页控件的整体外观进行修改，可以通过自定义 CSS 覆盖 Ant Design 默认的 `.ant
-pagination` 类样式。例如：
```css
.ant
-pagination {
background
-color: #f5f5f5;
border
-radius: 8px;
padding: 4px 8px;
}
.ant
-pagination-item {
background
-color: #ffffff;
border: 1px solid #d9d9d9;
}
.ant
-pagination-item:hover,
.ant
-pagination-item:focus {
border
-color: #1890ff;
background
-color: #e6f7ff;
}
.ant
-pagination-item
-active {
background
-color: #1890ff;
border
-color: #1890ff;
color: #ffffff;
}
```
这种方式适用于需要对
分页控件整体外观进行深度定制的场景 [^2]。
###
文章介绍了如何让 antd 的 Pagination 分页组件居中展示，聚焦于前端开发中组件样式布局的问题，为相关开发者提供解决方案。
扫一扫
2348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
