可以通过以下步骤实现:
以下是一个示例代码:
import React, { useState } from 'react';
const Table = ({ data }) => {
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
const paginate = (pageNumber) => {
setCurrentPage(pageNumber);
};
const getPageData = () => {
const startIndex = (currentPage - 1) * itemsPerPage;
const endIndex = startIndex + itemsPerPage;
return data.slice(startIndex, endIndex);
};
return (
<div>
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
{getPageData().map((item, index) => (
<tr key={index}>
<td>{item.column1}</td>
<td>{item.column2}</td>
<td>{item.column3}</td>
</tr>
))}
</tbody>
</table>
<div>
{data.length > itemsPerPage && (
<div>
{Array.from({ length: Math.ceil(data.length / itemsPerPage) }).map(
(item, index) => (
<button key={index} onClick={() => paginate(index + 1)}>
{index + 1}
</button>
)
)}
</div>
)}
</div>
</div>
);
};
export default Table;
在上述示例代码中,我们定义了一个Table组件,它接收一个数据数组作为props。通过useState钩子函数来管理当前页码的状态。getPageData函数根据当前页码和每页显示的数据量来获取当前页应该显示的数据。在渲染表格时,使用map方法遍历当前页的数据进行渲染。分页控件使用Array.from方法生成页码按钮,并通过onClick事件处理函数来更新当前页码的状态。
这是一个简单的ReactJS表格分页示例,你可以根据实际需求进行修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云