首页React antd table 自定义pagination

React antd table 自定义pagination

时间: 2025-06-14 20:16:07 浏览: 16

在Ant Design for React库中，Table组件通常会内置分页功能。如果你想自定义Pagination组件，可以按照以下步骤操作： 1. 首先，从Ant Design中导入`Table`和`Pagination`组件，以及你需要的其他样式组件，如`InputNumber`。 ```jsx import { Table, Pagination } from 'antd'; import InputNumber from 'antd/lib/input-number'; ``` 2. 创建一个自定义的分页组件。你可以选择使用原生的分页按钮，也可以创建一个响应式的输入框控制每页显示的记录数。 ```jsx const CustomPagination = ({ total, current, onChange }) => { return ( <div> <span>每页:</span> <InputNumber value={current} min={1} max={total} onChange={(value) => onChange(value)} /> <span>/</span> <span>{total}</span> <Pagination total={total} current={current} onChange={onChange} /> </div> ); }; ``` 3. 在`Table`组件中，传入自定义的`CustomPagination`作为` pagination`属性。 ```jsx <Table columns={columns} dataSource={data} pagination={ <CustomPagination total={yourTotalDataLength} // 替换为你的数据总长度 current={currentPage} // 替换为你当前页码 onChange={handlePageChange} // 替换为处理页码改变的方法 /> } /> ``` 4. 确保你在应用中有一个函数来处理页码的变化，比如`handlePageChange(page)`, 更新状态或者发送API请求获取新的数据。 ```jsx const handlePageChange = (page) => { setCurrentPage(page); fetchDataFromServer(page); // 获取对应页的数据 }; ```

阅读全文