Angular Search & Pagination

Paginationskomponent

For vores pagineringskomponent skal vi gøre to ting: gengive alle de mulige sidetal, som brugeren kan vælge, og registrere, når siden er ændret, for at hente data fra den valgte side.

Først og fremmest skal vi tilføje vores komponent en Input-egenskab til at modtage de informationer, vi skal bruge til at oprette pagineringen: sidestørrelsen og det samlede antal elementer.

Du vil bemærke, at jeg i stedet for en direkte input-egenskab har brugt en setter til at opfange den modtagne input-egenskab. Det var på grund af to ting: for at afrunde pagesAmount (hvis det af en eller anden grund ikke allerede var det) og også for at fylde et Array af tal med pagesAmount.

Ok, så hvorfor har vi brug for et Array af tal? For at kunne gengive alle de mulige sider for brugeren. I Angular kan vi ikke direkte tage et tal og bede om en *ngFor-loop et bestemt antal gange, så det er en strategi, som jeg normalt bruger til at overvinde dette.

Det vi gør er: Ved hjælp af et array af tal kan vi løbe gennem det og bruge indekset til at hente det nummer, vi ønsker. Da det, vi ønsker, bare er en almindelig ordnet nummerliste, er det nemt at opnå, som vist i nedenstående markup.

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

I denne markup gengiver vi alle de mulige sider, som brugeren kan vælge. Vi har tilføjet en ngClass for at sætte en vis stil på den aktuelt valgte side for at lade brugeren vide, hvilken side han aktuelt befinder sig på. Vi har også indsat en klikhandling, som vil udsende en begivenhed, der fortæller den overordnede komponent, at den valgte side er blevet ændret.

Nu skal vi også tilføje to pile for at gøre brugerens liv lettere; en til at gå en side tilbage og en til at gå en side frem. Vi vil dog skjule den venstre pil, når vi i øjeblikket er på den første side, og skjule den højre pil, når vi i øjeblikket er på den sidste side.

Men vi har stadig et problem her! Hvad nu hvis vores itemsAmount er hundreder og vores pageSize er lille? Eller endda tusindvis af elementer? Vi ville rendere alle siderne på én gang, og vi ville få en ret dårlig brugervenlighed med alle de tal, der bare hænger der.

Der er nogle mulige designløsninger til dette problem, som f.eks. at skjule de midterste sider eller skjule de sidste sider efter et bestemt antal. Den, jeg vil vise, er enkel at opnå, og jeg tror, at den kan være interessant i nogle tilfælde; hvilket er at ændre numrene fra bare at blive udskrevet til at bruge et select html-element med hver side som en mulighed.

Så, tilbage til vores markup, skal vi tilføje følgende ændringer til den del, hvor vi gengiver vores sidetal:

Slutkode

Så, ved at sætte alle vores dele sammen, ville dette være den endelige kode for en simpel, men effektiv pagineringskomponent implementeret. Den modtager et input med sidernes størrelse og det samlede antal elementer og giver brugeren mulighed for at vælge, hvilken side han ønsker at se, og udløser en begivenhed, der angiver den valgte side for at håndtere den nødvendige pagineringslogik/forespørgsler.