Angular Search & Pagination

Paginierungskomponente

Für unsere Paginierungskomponente müssen wir vor allem zwei Dinge tun: alle möglichen Seitennummern darstellen, die der Benutzer auswählen kann, und erkennen, wann sich die Seite geändert hat, um Daten von der gewählten Seite abzurufen.

Zunächst fügen wir unserer Komponente eine Input-Eigenschaft hinzu, um die Informationen zu erhalten, die wir für die Erstellung der Paginierung benötigen: die Seitengröße und die Gesamtanzahl der Elemente.

Sie werden feststellen, dass ich anstelle einer direkten Input-Eigenschaft einen Setter verwendet habe, um die empfangene Input-Eigenschaft abzufangen. Das geschah aus zwei Gründen: um den pagesAmount zu runden (für den Fall, dass er es aus irgendeinem Grund noch nicht war) und um ein Array von Zahlen mit dem pagesAmount zu füllen.

Ok, warum brauchen wir also ein Array von Zahlen? Um alle möglichen Seiten für den Benutzer zu rendern. In Angular können wir nicht direkt eine Zahl nehmen und eine *ngFor-Schleife eine bestimmte Anzahl von Malen anfordern, also ist das eine Strategie, die ich normalerweise verwende, um dies zu überwinden.

Was wir tun, ist: mit einem Array von Zahlen, können wir es in einer Schleife durchlaufen und den Index verwenden, um die gewünschte Zahl abzurufen. Da es sich bei dem, was wir wollen, um eine reguläre geordnete Zahlenliste handelt, ist es einfach zu erreichen, wie im folgenden Markup gezeigt wird.

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

In diesem Markup werden alle möglichen Seiten dargestellt, die der Benutzer auswählen kann. Wir haben eine ngClass hinzugefügt, um einen Stil für die aktuell ausgewählte Seite festzulegen, damit der Benutzer weiß, auf welcher Seite er sich gerade befindet. Außerdem haben wir eine Klick-Aktion eingefügt, die ein Ereignis auslöst, das der übergeordneten Komponente mitteilt, dass sich die ausgewählte Seite geändert hat.

Jetzt fügen wir noch zwei Pfeile hinzu, um dem Benutzer das Leben leichter zu machen; einen, um eine Seite zurückzugehen, und einen, um eine Seite weiterzugehen. Wir werden jedoch den linken Pfeil ausblenden, wenn wir uns auf der ersten Seite befinden, und den rechten Pfeil, wenn wir uns auf der letzten Seite befinden.

Aber wir haben hier noch ein Problem! Was ist, wenn unsere itemsAmount hunderte sind und unsere pageSize klein ist? Oder sogar Tausende von Artikeln? Wir würden alle Seiten auf einmal darstellen und hätten eine ziemlich schlechte Benutzerfreundlichkeit mit all diesen Zahlen, die einfach da hängen.

Es gibt einige mögliche Designlösungen für dieses Problem, wie das Ausblenden der mittleren Seiten oder das Ausblenden der letzten Seiten nach einer bestimmten Anzahl. Die Lösung, die ich zeigen werde, ist einfach zu erreichen und ich glaube, dass sie in einigen Fällen interessant sein kann. Sie besteht darin, die Zahlen nicht mehr nur auszudrucken, sondern ein Select-HTML-Element mit jeder Seite als Option zu verwenden.

Zurück zu unserem Markup fügen wir also die folgenden Änderungen an dem Teil hinzu, in dem wir unsere Seitenzahlen darstellen:

Endgültiger Code

So, wenn wir alle unsere Teile zusammenfügen, wäre dies der endgültige Code für eine einfache, aber effiziente Paginierungskomponente. Sie empfängt eine Eingabe mit der Seitengröße und der Gesamtzahl der Elemente und ermöglicht es dem Benutzer, die gewünschte Seite auszuwählen, wobei ein Ereignis ausgelöst wird, das die ausgewählte Seite angibt, um die erforderliche Paginierungslogik bzw. -anfragen zu verarbeiten.