Пагінація в Vanilla JavaScript

Вступ

Під час створення веб-сайту чи веб-додатку, особливо якщо вони містять багато шаблонні вміст (наприклад, сітка або список елементів, що належать до категорії) – як правило, гарною ідеєю є розділіть його на сторінки щоб зменшити кількість елементів, які одночасно з’являються на екрані.

У цій статті ми дізнаємося, як з нуля реалізувати розбиття на сторінки в наших веб-проектах за допомогою ванільного JavaScript.

Для цілей цієї статті ми будемо отримувати вміст із це приклад відповіді API. Він містить 100 точок даних, але ми використовуватимемо лише 30 і відображатимемо 6 публікацій на екрані одночасно.

Приступаючи до роботи

Перш ніж отримати всі необхідні публікації з API за допомогою вбудованого в браузер Fetch API, нам спочатку потрібно створити базову розмітку 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 posts 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); }
});

Після додавання a 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 з нуля, без будь-яких зовнішніх бібліотек і інструментів.

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