Ответ
В React с использованием useState и простой пагинации:
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
// Данные для отображения
const indexOfLastItem = currentPage * itemsPerPage;
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
// Рендер пагинации
const paginate = (pageNumber) => setCurrentPage(pageNumber);
return (
<div>
{currentItems.map(item => (
<div key={item.id}>{item.name}</div>
))}
<div className="pagination">
{[...Array(Math.ceil(data.length / itemsPerPage)).keys()].map(number => (
<button key={number} onClick={() => paginate(number + 1)}>
{number + 1}
</button>
))}
</div>
</div>
);Для сложных случаев можно использовать библиотеки типа react-paginate или API с пагинацией (limit/offset).
Ответ 18+ 🔞
Да ты посмотри, какой народ изобретательный! Сидят, блядь, и думают: "Как бы мне эту простыню данных на куски порезать, чтобы пользователь не охуел от её размера?". Ну и придумали пагинацию, ёпта!
Вот смотри, в Реакте это делается проще пареной репы, если, конечно, твоя репа не гнилая. Берёшь useState и заводишь себе переменную для текущей страницы.
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;Вот currentPage — это как номер текущей кассеты в магнитофоне, а itemsPerPage — песен на одной кассете. Допустим, десять.
Дальше, блядь, начинается магия арифметики, от которой у меня в школе мозг вытекал.
// Данные для отображения
const indexOfLastItem = currentPage * itemsPerPage; // Последний элемент на странице
const indexOfFirstItem = indexOfLastItem - itemsPerPage; // Первый элемент на странице
const currentItems = data.slice(indexOfFirstItem, indexOfLastItem); // А вот и наш кусок!Представь: у тебя массив data — это целый батон колбасы. slice — это острый нож. indexOfFirstItem и indexOfLastItem — это метки, где резать. И вот ты отрезал себе ровно десять кусочков (itemsPerPage) для текущей страницы. Красота, блядь!
Рендеришь эти кусочки, как обычно:
return (
<div>
{currentItems.map(item => (
<div key={item.id}>{item.name}</div>
))}А теперь, внимание, самый сок — кнопочки для перелистывания! Надо же дать пользователю возможность не только первую десятку смотреть.
<div className="pagination">
{[...Array(Math.ceil(data.length / itemsPerPage)).keys()].map(number => (
<button key={number} onClick={() => paginate(number + 1)}>
{number + 1}
</button>
))}
</div>Смотри, что тут происходит, это же ебушки-воробушки! Math.ceil(data.length / itemsPerPage) — это мы считаем, сколько всего страниц получится. Если 48 элементов делить на 10, будет 4.8, а ceil округляет вверх, до 5. Потому что последняя, пятая страница, будет неполная, всего с 8 элементами, но она нам нужна!
[...Array(N).keys()] — это такая хитрая жопа, чтобы быстро получить массив типа [0, 1, 2, 3, 4]. И из каждого числа делаем кнопку, которая при клике вызывает paginate, то есть просто ставит новую текущую страницу.
Ну и функция paginate — проще некуда:
const paginate = (pageNumber) => setCurrentPage(pageNumber);Всё, пиздец, готово! Пользователь тыкает на кнопку "3" — currentPage становится тройкой, компонент перерисовывается, формулы вверху пересчитываются, slice отрезает уже элементы с 20-го по 29-й, и рендерится новая десятка. Волшебство, блядь!
А если тебе лень эту всю хуйню с нуля писать, или данные с бэка приходят уже с пагинацией, то можно, конечно, взять какую-нибудь библиотеку, типа react-paginate. Но суть-то, блядь, от этого не меняется — всё равно под капотом примерно то же самое происходит. Главное — понять принцип, а там уже хоть в рот меня чих-пых, хоть об стенку!