Angular Search & Pagination

Paginationskomponent

För vår pagineringskomponent måste vi göra två huvudsakliga saker: återge alla möjliga sidnummer så att användaren kan välja och upptäcka när sidan har ändrats för att hämta data från den valda sidan.

För det första ska vi till vår komponent lägga till en Input-egenskap för att ta emot den information vi behöver för att skapa pagineringen: sidornas storlek och det totala antalet objekt.

Du kommer att märka att jag istället för en direkt input-egenskap har använt en setter för att fånga upp den mottagna input-egenskapen. Det berodde på två saker: att avrunda pagesAmount (om det av någon anledning inte redan var det) och att fylla en Array of numbers med pagesAmount.

Ok, så varför behöver vi en Array of numbers? För att kunna visa alla möjliga sidor för användaren. I Angular kan vi inte direkt ta ett nummer och be om en *ngFor-slinga ett visst antal gånger, så det är en strategi som jag brukar använda för att övervinna detta.

Vad vi gör är: med hjälp av en array av nummer kan vi slinga oss igenom den och använda indexet för att hämta det nummer vi vill ha. Eftersom det vi vill ha bara är en vanlig ordnad sifferlista är det enkelt att åstadkomma, vilket visas i markupen nedan.

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

I den här markupen återger vi alla möjliga sidor som användaren kan välja. Vi har lagt till en ngClass för att ställa in en viss stil på den för närvarande valda sidan för att låta användaren veta vilken sida han för närvarande befinner sig på. Vi har också lagt in en klickåtgärd som kommer att skicka ut en händelse som låter den överordnade komponenten veta att den valda sidan har ändrats.

Nu lägger vi också till två pilar för att göra användarens liv enklare; en för att gå tillbaka en sida och en för att gå framåt en sida. Vi ska dock dölja vänsterpilen när vi för tillfället befinner oss på den första sidan och dölja högerpilen när vi för tillfället befinner oss på den sista sidan.

Men vi har fortfarande ett problem här! Vad händer om vår itemsAmount är hundratals och vår pageSize är liten? Eller till och med tusen artiklar? Vi skulle rendera alla sidor på en gång och vi skulle få en ganska dålig användbarhet med alla dessa siffror som bara hänger där.

Det finns några möjliga designlösningar för detta problem, som att dölja de mellersta sidorna eller dölja de sista sidorna efter ett visst antal. Den jag kommer att visa är enkel att uppnå och jag tror att den kan vara intressant i vissa fall; vilket är att ändra siffrorna från att bara skrivas ut till att använda ett select html-element med varje sida som ett alternativ.

Så, tillbaka till vår markering, vi kommer att lägga till följande ändringar i den del där vi renderar våra sidnummer:

Slutkod

Så, genom att sätta ihop alla våra bitar, skulle det här vara den slutliga koden för en enkel men effektiv pagineringskomponent implementerad. Den tar emot en ingång med sidornas storlek och det totala antalet artiklar och låter användaren välja vilken sida han vill visa och utlöser en händelse som anger den valda sidan för att hantera den nödvändiga pagineringslogiken/förfrågningarna.