Lapozás Vanilla JavaScriptben

Bevezetés

Weboldal vagy webalkalmazás létrehozásakor, különösen, ha sok funkciót tartalmaz sablonos tartalom (például egy rács vagy egy kategóriába tartozó elemek listája) – általában jó ötlet oszd fel oldalakra hogy csökkentse a képernyőn egyszerre megjelenő elemek számát.

Ebben a cikkben megtanuljuk, hogyan valósítsuk meg a lapozást webprojektjeinkben a vanília JavaScript használatával az alapoktól kezdve.

Ennek a cikknek a céljából a tartalmat innen fogjuk lekérni ezt példa API válasz. 100 adatpontot tartalmaz, de csak 30-at használunk, és egyszerre 6 bejegyzést jelenítünk meg a képernyőn.

Elkezdeni

Mielőtt lekérnénk az összes szükséges bejegyzést az API-ból a böngészők beépített Fetch API-jával, először létre kell hoznunk egy alapvető HTML-jelölést, amelyet később dinamikusan kitöltünk a szkriptünkön keresztül:

<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-bejegyzések lekérése

Mint korábban említettük, az oldalszámozás a tartalom kisebb részekre való felosztásáról szól. Ehhez le kell kérnie az adatokat, el kell döntenie, mikor és hogyan kell felosztani, ki kell számítania az oldalak számát, majd meg kell mutatnia egy részét a felhasználónak. Szerencsére a háttérfunkciók általában ellátják az első néhány feladatot, és visszaadják a releváns oldalt, az oldalak teljes számát és a tartalmat. oldalanként.

Kezdjük azzal, hogy először lekérjük az összes bejegyzésünket, majd később úgy módosítjuk, hogy oldalanként csak néhány adatpont legyen lekérdezve:

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

Vizsgáljuk meg gyorsan a fenti kódot. Először is azzal kezdtük, hogy megszereztük a div elem, ahol az összes tartalmat megjelenítenénk a class nevet adtunk hozzá div. Végül írtunk egy függvényt a letöltési művelet kezelésére.

A fetchPosts() függvényt használtuk Fetch API hogy letöltse a bejegyzéseket a JSON-helyőrző bejegyzések API, majd tárolja a által hivatkozott JSON-adatokat posts változó és használta a innerHTML tulajdonság minden tartalom hozzáadásához a posts-section áthurkolva rajtuk.

Ezen a ponton sikeresen lekértük az összes tartalmat.

Kezdjük azzal, hogy deklarálunk három olyan változót, amelyek kritikusak a lapozás megvalósításához weboldalunkon. Az első a oldalanként deklarálni kívánt hozzászólások száma, aztán a aktuális oldalszám (1 alapértelmezés szerint), és a oldalak teljes száma.

Ehhez az útmutatóhoz adjuk a oldalak teljes száma fix számú 30:

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

Az előző részben az összes bejegyzést egyetlen oldalon jelenítettük meg, de egyszerre csak hatot szeretnénk megjeleníteni. Ezért beállítottuk a numberPerPage nak nek 6 amelyet most a lekérési művelet beállítására fogunk használni, hogy csak akkor jelenjen meg 6 hozzászólások.

Ez az adott megvalósítástól függ, de széles körben elterjedt gyakorlat, hogy az API-kból származó eredmények lekérésekor lekérdezési paramétereket használnak, amelyek lehetővé teszik egy bizonyos oldal az eredményekről. Például az általunk használt mock REST API lehetővé teszi a page és a limit olyan paraméterek, amelyek csak az adott időpontban megjelenített kötegek betöltését teszik lehetővé.

Így csak azokat az adatokat töltjük be, amelyeket meg akarunk mutatni a felhasználónak! Ezután vagy előre lekérhetjük a következő oldalt a gyorsabb betöltés érdekében, vagy gyönyörködhetünk a számítási sebességben, amelyet csak a megjelenítendő adatok betöltésével érünk el.

Ezeket a paramétereket fogjuk használni lekérési kérésünk módosításával:

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

A fenti kódban hozzáadtuk a két paramétert az API-végponthoz, amelyek a pageNumber és a oldalankénti hozzászólások száma ami segítené a bejegyzéseinket több oldalra bontani, majd ezeket a bejegyzéseket most már az oldalszám alapján is megjeleníthetjük.

Ezen kívül bejutottunk a pageNumber hoz fetchPosts() függvényt, így bármikor meghívhatjuk ezt a függvényt, amikor az oldal változik:

Most adjunk funkcionalitást az oldalunk alján található navigációs gombokhoz, és jelenítsünk meg megfelelő tartalmat az oldalszám alapján.

Észre fogjuk venni, hogy a jelölésben volt egy szakasz, amely az oldalszámozási gombokat mutatja:

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

Most hozzátesszük click eseményeket az egyes gombokhoz, így amikor rájuk kattintanak, az adott oldalnak szánt tartalom jelenjen meg.

Végrehajtása a Előző Gomb

A logika itt nagyon egyszerű. Mindössze annyit kell tennünk, hogy lekérjük a -t képviselő elemet előző gomb, adja hozzá a click eseményfigyelő, és a megfelelő tartalom megjelenítése a gombra kattintva:

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

Miután hozzáadta a click eseményfigyelő, ellenőriztük, hogy az aktuális oldalszám nagyobb-e, mint 1 a visszahívás funkcióban. Ha a szám egyenlő vagy kisebb mint 1, továbbra is csak az aktuális tartalmat fogjuk megjeleníteni. De ha az aktuális oldalszám nagyobb, mint 1 értékét szabadon csökkenthetjük és hívhatjuk a fetchPosts(pageNumber) függvényt az új oldalszámmal argumentumként átadva, így az előző oldal tartalmát mutatja.

Végrehajtása a Következő Gomb

A logika itt teljesen ugyanaz, mint a előző gombot, csak néhány apró változtatással. Természetesen a listaelemet az osztállyal együtt lekérjük next helyett prev. Azt is ellenőrizzük, hogy az aktuális oldalszám kisebb-e, mint a oldalszám amelyet beállítottunk 30 manuálisan korábban. Végül növeljük az aktuális oldalszámot a csökkentés helyett:

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

Következtetés

A tartalom felosztása kisebb, jobban kezelhető darabokra, amelyek egyenként jelennek meg, kulcsfontosságú, amikor megpróbál megjeleníteni egy adatbázist vagy bármilyen más adatforrást a webalkalmazásában.

Ebben a cikkben megvizsgáltuk, hogyan valósíthat meg lapozást JavaScript segítségével a semmiből, külső könyvtárak és eszközök nélkül.

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
• Forrás: https://stackabuse.com/pagination-in-vanilla-javascript/