Bei der Paginierung wird ein großer Datensatz in kleinere, besser verwaltbare Seiten unterteilt. Dies geschieht häufig, wenn es sich um große Datensätze handelt, deren gleichzeitige Anzeige unpraktisch wäre. Durch die Paginierung können Benutzer einfach durch die Daten navigieren und nur die Seiten anzeigen, die für sie relevant sind.
In diesem Tutorial erfahren Sie, wie Sie der Angular-Datentabelle eine serverseitige Paginierung hinzufügen. Um Paginierung in Angular hinzuzufügen, verwenden wir das Paket ngx-pagination.
Wenn Sie Angular CLI nicht installiert haben, führen Sie den folgenden Befehl aus, um es zu installieren.
npm install -g @angular/cli
Installieren Sie eine brandneue Angular-Anwendung:
ng new angular-pagination-example
Gehen Sie in das Projektstammverzeichnis:
cd angular-pagination-example
Führen Sie den folgenden Befehl aus, um die Paginierung in Angular hinzuzufügen, und wir müssen die ngx-pagination-Bibliothek installieren.
npm install ngx-pagination
Als nächstes importieren wir NgxPaginationModule in die Hauptdatei app.module.ts der Angular-App.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxPaginationModule } from 'ngx-pagination';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, NgxPaginationModule, HttpClientModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
Wir müssen das Bootstrap-UI-Paket installieren, um die Tabellen- und Paginierungs-UI-Komponenten zu gestalten.
npm install bootstrap
Registrieren Sie den Bootstrap-CSS-Pfad im styles-Array innerhalb von angular.jsonDatei.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
]
Wir werden einen Post-Datendienst in Angular erstellen; Diese Dienstdatei ruft die Daten über eine benutzerdefinierte API oder einen benutzerdefinierten Endpunkt ab. Mit der Hilfe des Angular HTTPClient-Dienstes stellen wir HTTP-GET-Anfragen und holen die Daten von einem Drittanbieterserver ab.
Wir müssen das HttpClientModule in app.module.ts importieren, um die HTTP-GET-Anfrage zu senden.
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [...],
imports: [
HttpClientModule
],
bootstrap: [...]
})
export class AppModule { }
Generieren Sie einen Datendienst mit dem unten angegebenen Befehl.
ng generate service post
Fügen Sie Code in der Datei post.service.ts hinzu:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
const endpoint = 'https://jsonplaceholder.typicode.com/posts';
@Injectable({
providedIn: 'root',
})
export class PostService {
constructor(private http: HttpClient) {}
getAllPosts(): Observable<any> {
return this.http.get(endpoint);
}
}
Fügen Sie Code zur Datei app.component.ts hinzu.
import { Component, OnInit } from '@angular/core';
import { PostService } from './post.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
POSTS: any;
page: number = 1;
count: number = 0;
tableSize: number = 7;
tableSizes: any = [3, 6, 9, 12];
constructor(private postService: PostService) {}
ngOnInit(): void {
this.fetchPosts();
}
fetchPosts(): void {
this.postService.getAllPosts().subscribe(
(response) => {
this.POSTS = response;
console.log(response);
},
(error) => {
console.log(error);
}
);
}
onTableDataChange(event: any) {
this.page = event;
this.fetchPosts();
}
onTableSizeChange(event: any): void {
this.tableSize = event.target.value;
this.page = 1;
this.fetchPosts();
}
}
Wir haben eine Angular-Paginierungskomponente mithilfe der Bootstrap-Tabelle und der Paginierungs-UI-Komponenten erstellt.
Die *ngFor-Schleife iteriert über Posts-Daten, die wir vom Angular-Post-Service.abs erhalten
Außerdem wurde das paginate: {}-Objekt übergeben und die Paginierungseinstellungen zusammen mit der aktiven Paginierungsklasse definiert.
Um die Paginierung in Angular anzuzeigen, haben wir die Direktive pagination-controls verwendet und die Methode onTableDataChange() damit verknüpft.
Platzieren Sie Code in app.component.html.
<div class="container">
<h3 class="text-center mt-5 mb-5">Angular Basic Pagination Example</h3>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr
*ngFor="
let post of POSTS
| paginate
: {
itemsPerPage: tableSize,
currentPage: page,
totalItems: count
};
let i = index
"
>
<th scope="row">{{ post.id }}</th>
<td>{{ post.title }}</td>
</tr>
</tbody>
</table>
<div class="d-flex justify-content-center">
<pagination-controls
previousLabel="Prev"
nextLabel="Next"
(pageChange)="onTableDataChange($event)"
>
</pagination-controls>
</div>
</div>
Führen Sie den Befehl aus, um das Projekt zu starten:
ng serve --open
In diesem Tutorial haben wir die Angular-Paginierungsanwendung erstellt. Wir haben gelernt, wie man die Paginierung in Angular anpasst und mit tabellarischen Daten implementiert.