В этом задании мы научимся разбивать большой список данных на страницы для удобной навигации.
Пагинация - это разделение большого списка на несколько страниц. Представьте книгу - вместо того чтобы читать всё на одной огромной странице, контент разбит на удобные части. Так же работает пагинация в приложениях.
Основная идея: мы не показываем все 100 постов сразу, а выбираем только те, которые относятся к текущей странице. Для этого используется метод slice(), который "вырезает" часть массива.
Например, для страницы 2 при 10 постах на страницу:
Метод slice(start, end) возвращает новый массив с элементами от индекса start до end (не включая end).
Количество страниц вычисляется делением общего числа элементов на количество на странице:
const totalPages =Math.ceil(100/10);// 10 страниц
Math.ceil() округляет вверх - если постов 95, нам нужно 10 страниц (не 9.5).
Для создания массива кнопок страниц используем Array.from():
Array.from({length:5},(_, i)=> i +1);// [1, 2, 3, 4, 5]
Задание
Необходимо создать систему пагинации для списка из 100 постов. Создайте два состояния: currentPage (номер текущей страницы, начальное значение 1) и postsPerPage (количество постов на странице, начальное значение 10). Вычислите indexOfLastPost как currentPage * postsPerPage, indexOfFirstPost как indexOfLastPost - postsPerPage, currentPosts как POSTS.slice(indexOfFirstPost, indexOfLastPost) и totalPages как Math.ceil(POSTS.length / postsPerPage). Реализуйте функции: goToPage(page) устанавливает currentPage, goToNextPage() увеличивает страницу (если не последняя), goToPrevPage() уменьшает страницу (если не первая). Отобразите только currentPosts с помощью map. Создайте кнопки пагинации - "Назад" (отключена на первой странице), номера страниц (используйте Array.from), "Вперёд" (отключена на последней). Добавьте select для выбора количества постов на странице. Покажите информацию о текущей странице и диапазоне отображаемых постов.
functionPagination(){//...constgoToPage=(page)=>{//...};constgoToNextPage=()=>{//...};constgoToPrevPage=()=>{//...};return(<divclassName="pagination-container"><h1>📄 Посты с пагинацией</h1><divclassName="settings-panel">{/*...*/}</div><divclassName="posts-list">{/*...*/}</div><divclassName="pagination"><buttononClick={goToPrevPage}disabled={/*...*/}> ← Назад
</button>{/*...*/}<buttononClick={goToNextPage}disabled={/*...*/}> Вперёд →
</button></div></div>);}
