Пагинация в ванильном JavaScript

Введение

При создании веб-сайта или веб-приложения, особенно если они содержат много шаблонный содержимое (например, сетка или список элементов, принадлежащих к категории) — обычно рекомендуется разделить его на страницы чтобы уменьшить количество элементов, отображаемых на экране одновременно.

В этой статье мы узнаем, как реализовать нумерацию страниц в наших веб-проектах с помощью ванильного JavaScript с нуля.

Для целей этой статьи мы будем получать содержимое из этой пример ответа API. Он содержит 100 точек данных, но мы будем использовать только 30 и отображать на экране 6 сообщений одновременно.

Первые шаги

Перед получением всех необходимых сообщений из API с помощью встроенного в браузер API Fetch нам сначала нужно создать базовую HTML-разметку, которая позже будет динамически заполняться с помощью нашего скрипта:

<div class="container"> <div class="title-section"> <h1 class="title">Posts</h1> </div> <div class="posts-section"></div> <div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul> </div>
</div>

Получение сообщений REST API

Как упоминалось ранее, нумерация страниц — это разделение контента на более мелкие фрагменты. Это требует, чтобы вы извлекали данные, решали, когда и как разделить, вычисляли количество страниц, а затем показывали их часть пользователю. К счастью, серверная функциональность обычно выполняет первые несколько задач и возвращает соответствующую страницу, общее количество страниц и контент. на страницу.

Давайте начнем с того, что сначала получим все наши сообщения, а затем изменим это, чтобы запрашивать только несколько точек данных на странице:

const postsSection = document.querySelector(".posts-section"); const fetchPosts = async () => { const response = await fetch( "https://jsonplaceholder.typicode.com/posts" ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

Давайте быстро рассмотрим приведенный выше код. Прежде всего, мы начали с получения div элемент, где мы будем отображать весь наш контент через class имя, которое мы присвоили div. Наконец, мы написали функцию для обработки операции выборки.

В fetchPosts() функция, мы использовали Fetch API для извлечения сообщений из JSON Placeholder публикует API, затем сохраните данные JSON, на которые ссылается posts переменная и использовала innerHTML свойство для добавления каждого фрагмента контента в posts-section перебирая их.

На данный момент мы успешно получили весь наш контент.

Давайте начнем с объявления трех переменных, которые имеют решающее значение для реализации нумерации страниц на нашей веб-странице. Первый из них количество сообщений, которые мы хотим объявить на странице, то номер текущей страницы (1 по умолчанию) и общее количество страниц.

Для этого руководства мы дадим общее количество страниц фиксированное количество 30:

const numberPerPage = 6;
var pageNumber = 1;
var numberOfPages = 30;

В предыдущем разделе мы отображали все сообщения на одной странице, но мы хотим показывать только шесть одновременно. Поэтому мы установили numberPerPage в 6 который мы теперь будем использовать для настройки операции извлечения, чтобы он отображал только 6 сообщения.

Это зависит от конкретной реализации, но широко распространенной практикой является разрешение использования параметров запроса при извлечении результатов из API, которые позволяют получить определенные страница результатов. Например, фиктивный REST API, который мы используем, позволяет page и limit параметры, позволяющие загружать только те пакеты, которые будут отображаться в данный момент времени.

Таким образом, мы загружаем только те данные, которые хотим показать пользователю! Затем мы можем либо предварительно загрузить следующую страницу для более быстрой загрузки, либо насладиться ускорением вычислений, достигаемым за счет загрузки только данных для отображения.

Мы будем использовать эти параметры, изменив наш запрос на выборку:

const fetchPosts = async (pageNumber) => { const response = await fetch( `https://jsonplaceholder.typicode.com/posts?_page=${pageNumber}&_limit=${numberPerPage}` ); const posts = await response.json(); postsSection.innerHTML = ""; posts.forEach((post) => { postsSection.innerHTML += ` <div class="posts-card"> <div class="post-title"> <h2 class="post-title-text">${post.title}</h2> </div> <div class="post-body"> <p class="post-body-text"> ${post.body} </p> </div> </div> `; });
}; fetchPosts();

В приведенном выше коде мы добавили два параметра к конечной точке API, которые являются pageNumber и количество постов на странице что помогло бы нам разбить наши сообщения на несколько страниц, а затем эти сообщения теперь можно отображать на основе номера страницы.

Кроме того, мы также прошли в pageNumber до fetchPosts() поэтому мы можем вызывать эту функцию всякий раз, когда страница изменяется:

Давайте теперь добавим функциональность кнопкам навигации по страницам в нижней части нашей страницы и заставим их отображать соответствующий контент в зависимости от номера страницы.

Мы заметим, что в разметке у нас был раздел, показывающий кнопки пагинации:

<div class="pagination-section"> <ul class="pagination"> <li class="page-item prev"><a class="page-link" href="#">Previous</a></li> <li class="page-item next"><a class="page-link" href="#">Next</a></li> </ul>
</div>

Сейчас мы добавим click события для каждой кнопки, чтобы при нажатии на них отображалось содержимое, предназначенное для этой страницы.

Реализация Предыдущая Button

Логика здесь довольно проста. Все, что нам нужно сделать, это получить элемент, представляющий предыдущая кнопка, добавить click прослушиватель событий для него и показывать соответствующий контент при нажатии кнопки:

const prev = document.querySelector('.prev');
prev.addEventListener('click', (e) => { e.preventDefault(); if (pageNumber > 1) { pageNumber--; fetchPosts(pageNumber); }
});

После добавления click прослушиватель событий, мы проверили, больше ли текущий номер страницы, чем 1 в функции обратного вызова. Если число равно или меньше 1, мы просто продолжим показывать текущий контент. Но если текущий номер страницы больше, чем 1 мы можем свободно уменьшать его значение и вызывать fetchPosts(pageNumber) функция с новым номером страницы, переданным ей в качестве аргумента, поэтому показывает содержимое предыдущей страницы.

Реализация Следующая Button

Логика здесь полностью та же, что и для предыдущий кнопку, с небольшими изменениями. Конечно, мы получим элемент списка с классом next вместо prev. Также мы проверим, меньше ли текущий номер страницы количество страниц который мы установили на 30 раньше вручную. В конце концов, мы увеличим текущий номер страницы, а не уменьшим его:

const next = document.querySelector(".next");
next.addEventListener("click", (e) => { e.preventDefault(); if (pageNumber < numberOfPages) { pageNumber++; fetchPosts(pageNumber); }
});

Заключение

Разделение содержимого на более мелкие, более управляемые фрагменты, отображаемые по отдельности, имеет решающее значение всякий раз, когда вы пытаетесь отобразить базу данных или любой другой источник данных в своем веб-приложении.

В этой статье мы рассмотрели, как реализовать пагинацию с помощью JavaScript с нуля, без каких-либо внешних библиотек и инструментов.

• SEO-контент и PR-распределение. Получите усиление сегодня.
• Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. Доступ здесь.
• Источник: https://stackabuse.com/pagination-in-vanilla-javascript/