表分页:如何创建一个包含 10 个元素的表并实现第一个、上一个、下一个和最后一个按钮?

Question

我正在尝试创建带有id，firstName和lastName的表。每页仅存储 10 个元素，并实现第一页、上一页、下一页、最后一页按钮。

鉴于下面的代码，我将如何能够在每页实现 10 个元素？以及如何实现第一页、上一页、下一页、最后一页按钮？

import React from 'react';
import data from './data';
const USERS_URL = data.results;
export default function Table() {
return (
<div>
<table className="table">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
{USERS_URL.map(d => {
return (
<tr>
<td>{d.id}</td>
<td>{d.firstName}</td>
<td>{d.lastName}</td>
</tr>
)
})}
</tbody>
</table>
<section className="pagination">
<button>first</button>
<button>previous</button>
<button>next</button>
<button>last</button>
</section>
</div>
)
}

Answer 1

在组件挂载时，您可以将数据排序到对象映射中，并根据按下的按钮动态更新当前页面键：

https://codesandbox.io/s/zen-turing-mtbpy?file=/src/App.js