Paginare în JavaScript Vanilla

Introducere

Când creați un site web sau o aplicație web, mai ales dacă au multe șablonată conținut (cum ar fi o grilă sau o listă de articole aparținând unei categorii) – în general este o idee bună să împărțiți-l în pagini pentru a reduce numărul de elemente care apar simultan pe ecran.

În acest articol, vom învăța cum să implementăm paginarea în proiectele noastre web folosind JavaScript vanilla de la zero.

În scopul acestui articol, vom prelua conținutul de la acest exemplu de răspuns API. Conține 100 de puncte de date, dar vom folosi doar 30 și vom afișa 6 postări simultan pe ecran.

Noțiuni de bază

Înainte de a prelua toate postările necesare din API folosind API-ul Fetch încorporat în browser, mai întâi trebuie să creăm un marcaj HTML de bază care va fi completat dinamic prin scriptul nostru mai târziu:

<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>

Preluare postări REST API

După cum am menționat anterior, paginarea se referă la împărțirea conținutului în bucăți mai mici. Vă cere să preluați datele, să decideți când și cum să împărțiți, să calculați numărul de pagini și apoi să afișați o parte din acestea utilizatorului. Din fericire – funcționalitatea back-end se ocupă de obicei de primele câteva sarcini și returnează pagina relevantă, numărul total de pagini și conținutul per pagină.

Să începem prin a prelua mai întâi toate postările noastre, apoi mai târziu vom modifica acest lucru pentru a interoga doar câteva puncte de date pe pagină:

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();

Să examinăm rapid codul de mai sus. În primul rând, am început prin obținerea div element în care am afișa tot conținutul nostru prin intermediul class numele pe care l-am atribuit div. În cele din urmă, am scris o funcție pentru a gestiona operația de preluare.

În fetchPosts() funcția, am folosit Preluare API pentru a prelua postări din API-ul de postări JSON Placeholder, apoi stocați datele JSON la care face referire posts variabilă și a folosit innerHTML proprietate pentru a adăuga fiecare conținut la posts-section prin bucla prin ele.

În acest moment, am preluat cu succes tot conținutul nostru.

Să începem prin a declara trei variabile care sunt critice pentru implementarea paginației în pagina noastră web. Primul este numărul de postări pe care dorim să le declarăm pe pagină, apoi numărul paginii curente (1 implicit), și numărul total de pagini.

Pentru acest ghid vom oferi numărul total de pagini un număr fix de 30:

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

În secțiunea anterioară, am afișat toate postările pe o singură pagină, dar dorim să afișăm doar șase o dată. Prin urmare, am setat numberPerPage la 6 pe care îl vom folosi acum pentru a regla operația de preluare, astfel încât să fie afișată numai 6 posturi.

Depinde de implementarea specifică, dar este o practică larg răspândită să se permită folosirea parametrilor de interogare la preluarea rezultatelor din API-uri, care vă permit să preluați un anumit pagină a rezultatelor. De exemplu, API-ul REST simulat pe care îl folosim permite page și limit parametri care vă permit să încărcați numai loturi pe care le veți afișa la un moment dat.

În acest fel, încărcăm doar datele pe care dorim să le arătăm utilizatorului! Putem apoi fie să preluăm pagina următoare pentru un timp de încărcare mai rapid, fie să ne delectăm cu accelerarea de calcul obținută doar prin încărcarea datelor care urmează să fie afișate.

Vom folosi acești parametri modificând cererea noastră de preluare:

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();

În codul de mai sus, am adăugat cei doi parametri la punctul final API, care sunt pageNumber si numărul de postări pe pagină ceea ce ne-ar ajuta să împărțim postările noastre în mai multe pagini și apoi aceste postări pot fi acum afișate pe baza numărului paginii.

În plus, am trecut și în pageNumber la fetchPosts() astfel încât să putem apela această funcție ori de câte ori pagina se schimbă:

Să adăugăm acum funcționalități la butoanele de navigare a paginii din partea de jos a paginii noastre și să le facem să afișeze conținut adecvat pe baza numărului paginii.

Vom observa că în markup aveam o secțiune care afișează butoanele de paginare:

<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>

Acum vom adăuga click evenimente la fiecare buton, astfel încât atunci când sunt făcute clic, să apară conținutul destinat paginii respective.

Implementarea Pagina Anterioară Buton

Logica aici este destul de simplă. Tot ce trebuie să facem este să recuperăm elementul care reprezintă butonul anterior, adaugă click ascultătorul evenimentului și afișați conținutul corespunzător atunci când se face clic pe butonul:

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

După adăugarea unui click ascultător de evenimente, am verificat dacă numărul paginii curente este mai mare decât 1 în funcția de apel invers. Dacă numărul este egal sau mai mic decât 1, vom continua să afișăm conținutul actual. Dar dacă numărul paginii curente este mai mare decât 1 putem să-i diminuăm în mod liber valoarea și să numim fetchPosts(pageNumber) funcția cu noul număr de pagină trecut în ea ca argument, afișând astfel conținutul paginii anterioare.

Implementarea Pagina Următoare → Buton

Logica de aici este complet aceeași ca și pentru precedent butonul, cu doar câteva modificări minore. Desigur, vom prelua elementul listă cu clasa next în loc de prev. De asemenea, vom verifica dacă numărul actual al paginii este mai mic decât număr de pagini la care ne-am setat 30 manual mai devreme. În cele din urmă, vom incrementa numărul actual al paginii în loc să-l decrecem:

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

Concluzie

Împărțirea conținutului în bucăți mai mici, mai ușor de gestionat, care sunt afișate individual, este crucială ori de câte ori încercați să afișați o bază de date sau orice altă sursă de date în aplicația dvs. web.

În acest articol, am analizat cum să implementăm paginarea cu JavaScript de la zero, fără biblioteci și instrumente externe.

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
• Sursa: https://stackabuse.com/pagination-in-vanilla-javascript/