Прежде всего вам нужно создать две переменные, которые помогут вам отслеживать текущую страницу и размер таблицы. Давайте назовем их pageSize и pageIndex
class App extends React.Component {
state = {
pageSize: 2, // <- 2 items will be shown on single page
pageIndex: 0, // 0 is a default page to show
items: []
};
...
Затем вам нужно получить некоторые данные из внешнего источника. В моем примере я просто создаю фиктивный массив и устанавливаю его в состояние.
...
componentDidMount() {
const data = [
{ id: 1, name: "Roman" },
{ id: 2, name: "Oleh" },
{ id: 3, name: "Vitalii" },
{ id: 4, name: "Mikhail" },
{ id: 5, name: "Vladislav" },
{ id: 6, name: "Anton" },
{ id: 7, name: "Yurii" },
{ id: 8, name: "Volodymir" },
{ id: 9, name: "Taras" }
];
this.setState({ items: data });
}
...
После этого вам нужно создать вспомогательные функции и разместить там логику навигации по таблице. Давайте назовем их handlePrevPageClick и handleNextPageClick.
. handlePrevPageClick должно уменьшить текущий индекс при нажатии. Кроме того, мы должны предотвратить прокрутку пользователя до большого количества. Таким образом, если pageIndex не равно 0 - уменьшите, иначе прекратите уменьшаться.
handleNextPageClick должен иметь абсолютно такую же логику, что и handlePrevPageClick. Единственное, что это обратное. Не позволяйте пользователю прокручивать вашу таблицу. Для этого нам нужно понять, сколько у нас страниц. Разделив this.state.items / this.state.pageSize, мы получим общее количество доступных страниц. Давайте представим, что в нашей таблице 12 элементов, а размер страницы равен 5. Итак, 12/5 = 2,4. Это означает, что у нас будет 2 загруженных страницы и осталось 4 элемента. Используя Math.ceil(12 / 5), мы получим 3 - это целое число всех доступных страниц таблицы. После этого мы просто добавляем простое условие, если pageIndex <3, если да - увеличить <code>pageIndex, в противном случае остановиться.
...
handlePrevPageClick(event) {
this.setState(prevState => ({
pageIndex: prevState.pageIndex > 0 ? prevState.pageIndex - 1 : 0
}));
}
handleNextPageClick(event) {
this.setState(prevState => ({
pageIndex:
prevState.pageIndex <
Math.ceil(prevState.items.length / prevState.pageSize)
? prevState.pageIndex + 1
: prevState.pageIndex
}));
}
Последнее, что нужно сделать, - визуализировать вашу таблицу с правильными строками. Для этого вы можете использовать .slice(...). Первый аргумент - это левая граница страницы, второй - правая граница страницы.
Первая страница
this.state.pageIndex * this.state.pageSize, // 0 * 5 = 0
this.state.pageIndex * this.state.pageSize + this.state.pageSize // 0 * 5 + 5 = 5
Отображение элементов с индексом от 0 до 5.
Вторая страница
this.state.pageIndex * this.state.pageSize, // 1 * 5 = 5
this.state.pageIndex * this.state.pageSize + this.state.pageSize // 1 * 5 + 5 = 10
Отображение элементов с индексом от 5 до 10.
...
render() {
return (
<>
<button onClick={event => this.handlePrevPageClick(event)}>
Prev page
</button>
<button onClick={event => this.handleNextPageClick(event)}>
Next page
</button>
<table border="1">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
{this.state.items
.slice(
this.state.pageIndex * this.state.pageSize,
this.state.pageIndex * this.state.pageSize + this.state.pageSize
)
.map(item => (
<tr>
<td>{item.id}</td>
<td>{item.name}</td>
</tr>
))}
</tbody>
</table>
</>
);
}
}
Если вы хотите увидеть полный рабочий пример, используйте эту CodeSandbox ссылку