Angular Search & Pagination

Pagination Component

A pagination komponensünk esetében két fő dolgot kell tennünk: megjeleníteni az összes lehetséges oldalszámot, hogy a felhasználó választhasson, és érzékelni, ha az oldal megváltozott, hogy a kiválasztott oldalról adatokat kérjen le.

Először is hozzáadunk a komponensünkhöz egy Input tulajdonságot, hogy megkapjuk a pagináció létrehozásához szükséges információkat: az oldalak méretét és az elemek teljes számát.

Láthatod, hogy a közvetlen input tulajdonság helyett egy settert használtam a kapott input tulajdonság elfogására. Ez két dolog miatt volt: a pagesAmount kerekítése (ha valamiért még nem volt) és egy számokból álló Array kitöltése a pagesAmount-tal.

Oké, akkor miért van szükségünk egy számokból álló Array-re? Azért, hogy az összes lehetséges oldalt megjeleníthessük a felhasználó számára. Angularban nem tudunk közvetlenül egy számot venni és egy *ngFor ciklusban meghatározott számú alkalommal kérni, így ez az egyik stratégia, amit általában használok ennek leküzdésére.

Azt csináljuk, hogy: egy számokból álló tömböt használva, végighaladhatunk rajta és az index segítségével lekérhetjük a kívánt számot. Mivel amit mi akarunk, az csak egy közönséges rendezett számlista, ez egyszerűen megvalósítható, ahogy az alábbi markupban látható.

<span
*ngFor="let page of pagesArray; let index = index"
="{ 'active': currentPage === index + 1 } 
(click)="setPage(index + 1)"
>
{{ index + 1 }}
</span>

Ebben a markupban az összes lehetséges oldalt megjelenítjük a felhasználó számára, hogy választhasson. Hozzáadtunk egy ngClass-t, hogy az aktuálisan kiválasztott oldalra valamilyen stílust állítsunk be, hogy a felhasználó tudja, hogy éppen melyik oldalon van. Emellett beillesztettünk egy click action-t, amely egy eseményt fog kibocsátani, amely tudatja a szülő komponenssel, hogy a kiválasztott oldal megváltozott.

Most, adjunk hozzá két nyilat is, hogy megkönnyítsük a felhasználó életét; egyet, amellyel egy oldalt visszaléphetünk, és egyet, amellyel előre léphetünk egy oldalt. A bal oldali nyilat azonban elrejtjük, ha éppen az első oldalon vagyunk, a jobb oldali nyilat pedig elrejtjük, ha éppen az utolsó oldalon vagyunk.

De itt még mindig van egy problémánk! Mi van akkor, ha az itemAmountunk több száz, az pageSize-unk pedig kicsi? Vagy akár ezer tétel? Az összes oldalt egyszerre renderelnénk, és elég rossz lenne a használhatóságunk, ha az a sok szám csak úgy ott lógna.

Ezekre a problémákra van néhány lehetséges tervezési megoldás, például a középső oldalak elrejtése, vagy az utolsó oldalak elrejtése egy bizonyos szám után. Az egyik, amit mutatni fogok, egyszerűen megvalósítható, és úgy gondolom, hogy néhány esetben érdekes lehet; ami a számok megváltoztatása a csak nyomtatásról egy select html elem használatára, ahol minden oldal választható.

Szóval, visszatérve a jelölésünkhöz, a következő változtatásokat fogjuk hozzáadni ahhoz a részhez, ahol megjelenítjük az oldalszámokat:

Végső kód

Szóval, az összes darabunkat összerakva, ez lenne a végső kód egy egyszerű, de hatékony oldalszámozási komponens megvalósításához. Kap egy bemenetet az oldalak méretével és az összes elem mennyiségével, és lehetővé teszi a felhasználó számára, hogy kiválassza, melyik oldalt szeretné megtekinteni, és a kiválasztott oldalt jelző eseményt vált ki a szükséges lapozási logika/kérdések kezelése érdekében.