Paginacija v Vanilla JavaScript

Predstavitev

Pri izdelavi spletnega mesta ali spletne aplikacije, še posebej, če vsebujeta veliko šablonski vsebino (kot je mreža ali seznam elementov, ki pripadajo kategoriji) – na splošno je dobro, da razdeli na strani da zmanjšate število elementov, ki se naenkrat prikažejo na zaslonu.

V tem članku se bomo naučili, kako implementirati označevanje strani v naše spletne projekte z uporabo vanilla JavaScript od začetka.

Za namene tega članka bomo pridobili vsebino iz ta primer odgovora API-ja. Vsebuje 100 podatkovnih točk, vendar jih bomo uporabili le 30 in prikazali 6 objav na zaslonu hkrati.

Začetek

Preden pridobimo vse zahtevane objave iz API-ja s pomočjo API-ja Fetch, ki je vgrajen v brskalnik, moramo najprej ustvariti osnovno oznako HTML, ki bo pozneje dinamično izpolnjena prek našega skripta:

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

Pridobivanje objav REST API

Kot smo že omenili, gre pri paginaciji za razdelitev vsebine na manjše dele. Od vas zahteva, da pridobite podatke, se odločite, kdaj in kako jih boste razdelili, izračunate število strani in nato del pokažete uporabniku. K sreči – zaledna funkcionalnost običajno poskrbi za prvih nekaj opravil in vrne ustrezno stran, skupno število strani in vsebino na stran.

Začnimo tako, da najprej pridobimo vse naše objave, kasneje pa bomo to spremenili tako, da bomo iskali samo nekaj podatkovnih točk na stran:

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

Na hitro preglejmo zgornjo kodo. Najprej smo začeli s pridobivanjem div element, kjer bi prikazali vso našo vsebino prek class ime, ki smo ga dodelili div. Nazadnje smo napisali funkcijo za obdelavo operacije pridobivanja.

v fetchPosts() funkcijo smo uporabili Fetch API za pridobivanje objav iz JSON Placeholder objave API, nato shranite podatke JSON, na katere se sklicuje posts spremenljivko in uporabil innerHTML lastnost za dodajanje vsakega dela vsebine v posts-section z zanko skozi njih.

Na tej točki smo uspešno pridobili vso našo vsebino.

Začnimo z razglasitvijo treh spremenljivk, ki so ključne za izvajanje označevanja strani znotraj naše spletne strani. Prvi je število objav, ki jih želimo prijaviti na stran, nato pa trenutna številka strani (1 privzeto) in skupno število strani.

Za ta vodnik bomo dali skupno število strani fiksno število 30:

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

V prejšnjem razdelku smo prikazali vse objave na eni strani, vendar želimo prikazati samo šest naenkrat. Zato smo postavili numberPerPage do 6 ki ga bomo zdaj uporabili za prilagoditev operacije pridobivanja, tako da se prikaže samo 6 objav.

Odvisno je od specifične izvedbe, vendar je splošno razširjena praksa, da se pri pridobivanju rezultatov iz API-jev dovoli uporaba poizvedbenih parametrov, ki vam omogočajo, da pridobite določen Stran rezultatov. Na primer lažni API REST, ki ga uporabljamo, omogoča page in limit parametri, ki vam omogočajo samo nalaganje paketov, ki jih boste prikazali ob določenem času.

Tako naložimo le tiste podatke, ki jih želimo prikazati uporabniku! Nato lahko vnaprej pridobimo naslednjo stran za hitrejši čas nalaganja ali pa uživamo v računalniški pospešitvi, ki jo dosežemo z nalaganjem samo podatkov, ki bodo prikazani.

Te parametre bomo uporabili s spremembo naše zahteve za pridobivanje:

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

V zgornji kodi smo končni točki API dodali dva parametra, ki sta pageNumber in število objav na stran kar bi nam pomagalo razdeliti objave na več strani, nato pa so te objave zdaj lahko prikazane glede na številko strani.

Dodatno smo opravili tudi v pageNumber k fetchPosts() tako da lahko to funkcijo pokličemo vsakič, ko se stran spremeni:

Dodajmo zdaj funkcionalnost navigacijskim gumbom po straneh na dnu naše strani in naj prikažejo ustrezno vsebino glede na številko strani.

Opazili bomo, da smo imeli v oznaki razdelek, ki prikazuje gumbe za označevanje strani:

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

Zdaj bomo dodali click dogodkov na vsak gumb, tako da se ob kliku prikaže vsebina, namenjena tej strani.

Izvajanje Prejšnja Button

Logika tukaj je precej preprosta. Vse kar moramo storiti je, da pridobimo element, ki predstavlja prejšnji gumb, dodajte click poslušalec dogodkov nanj in prikaže ustrezno vsebino, ko kliknete gumb:

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

Po dodajanju a click poslušalec dogodkov, smo preverili, ali je trenutna številka strani večja od 1 v funkciji povratnega klica. Če je število enako ali manjše od 1, še naprej bomo prikazovali trenutno vsebino. Če pa je trenutna številka strani večja od 1 njegovo vrednost lahko prosto zmanjšamo in pokličemo fetchPosts(pageNumber) funkcijo z novo številko strani, ki je bila posredovana kot argument, zato prikazuje vsebino prejšnje strani.

Izvajanje Naslednji Button

Logika je tukaj popolnoma enaka kot pri prejšnja gumb z le nekaj manjšimi spremembami. Seveda bomo element seznama pridobili z razredom next Namesto prev. Prav tako bomo preverili, ali je trenutna številka strani manjša od število strani ki smo ga nastavili 30 ročno prej. Na koncu bomo trenutno številko strani povečali, namesto da bi jo zmanjšali:

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

zaključek

Razdelitev vsebine na manjše, bolj obvladljive dele, ki so prikazani posamično, je ključnega pomena, kadar koli poskušate prikazati zbirko podatkov ali kateri koli drug vir podatkov v svoji spletni aplikaciji.

V tem članku smo si ogledali, kako implementirati paginacijo z JavaScriptom od začetka, brez zunanjih knjižnic in orodij.

• Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. Dostopite tukaj.
• vir: https://stackabuse.com/pagination-in-vanilla-javascript/