Angular Search & Pagination

Paginointikomponentti

Paginointikomponentillemme on tehtävä kaksi pääasiallista asiaa: renderöidä kaikki mahdolliset sivunumerot käyttäjän valittavaksi ja havaita, milloin sivu on vaihtunut, jotta tietoja voidaan hakea valitulta sivulta.

Aluksi lisäämme komponenttiimme Input-ominaisuuden vastaanottamaan tiedot, joita tarvitsemme paginoinnin luomiseksi: sivujen koko ja kohteiden kokonaismäärä.

Huomaa, että suoran input-ominaisuuden sijasta olen käyttänyt setteriä vastaanotetun input-ominaisuuden sieppaamiseen. Tämä johtui kahdesta asiasta: sivumäärän pyöristämisestä (jos se ei jostain syystä ollut sitä jo) ja myös numeroiden Array:n täyttämisestä sivumäärällä.

Okei, miksi siis tarvitsemme numeroiden Array:n? Jotta voimme renderöidä kaikki mahdolliset sivut käyttäjälle. Angularissa emme voi suoraan ottaa numeroa ja pyytää *ngFor-silmukalla tietty määrä kertoja, joten tämä on yksi strategia, jota yleensä käytän tämän ongelman voittamiseksi.

Mitä teemme: käyttämällä numeroiden arraya, voimme tehdä silmukan sen läpi ja käyttää indeksiä halutun numeron hakemiseen. Koska haluamamme on vain tavallinen järjestetty numerolista, se on helppo toteuttaa, kuten alla olevassa markupissa näkyy.

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

Tässä markupissa renderoimme kaikki mahdolliset sivut käyttäjän valittavaksi. Olemme lisänneet ngClassin asettaaksemme jonkin tyylin tällä hetkellä valitulle sivulle, jotta käyttäjä tietäisi, millä sivulla hän tällä hetkellä on. Lisäksi olemme lisänneet click-toiminnon, joka lähettää tapahtuman, joka kertoo vanhemmalle komponentille, että valittu sivu on vaihtunut.

Lisätään nyt myös kaksi nuolta, jotka helpottavat käyttäjiemme elämää; yksi, jolla voi siirtyä yhden sivun taaksepäin ja yksi, jolla voi siirtyä yhden sivun eteenpäin. Piilotamme kuitenkin vasemmanpuoleisen nuolen, kun olemme tällä hetkellä ensimmäisellä sivulla ja oikeanpuoleisen nuolen, kun olemme tällä hetkellä viimeisellä sivulla.

Mutta meillä on tässä vielä yksi ongelma! Entä jos itemAmount on satoja ja pageSize on pieni? Tai jopa tuhansia kohteita? Renderöisimme kaikki sivut kerralla ja meillä olisi aika huono käytettävyys, kun kaikki nuo numerot vain roikkuisivat siellä.

Tälle ongelmalle on joitakin mahdollisia suunnitteluratkaisuja, kuten keskimmäisten sivujen piilottaminen tai viimeisten sivujen piilottaminen tietyn määrän jälkeen. Se, jonka aion näyttää, on yksinkertainen saavuttaa ja uskon, että se voi olla mielenkiintoinen joissakin tapauksissa; mikä on numeroiden muuttaminen vain tulostamisesta käyttämään select html-elementtiä, jossa jokainen sivu on valintana.

Takaisin merkintätapaamme, lisäämme siis seuraavat muutokset siihen osaan, jossa renderöimme sivunumerot:

Loppukoodi

Lisäämällä kaikki palasemme yhteen, tämä olisi lopullinen koodi yksinkertaiselle, mutta tehokkaalle toteutetulle sivunumerokomponentille. Se vastaanottaa syötteen, joka sisältää sivujen koon ja kohteiden kokonaismäärän, ja antaa käyttäjän valita, mitä sivua hän haluaa tarkastella, ja laukaisee tapahtuman, joka ilmoittaa valitun sivun, jotta voidaan käsitellä tarvittava paginointilogiikka/pyynnöt.