So fügen Sie serverseitige Paginierung in Angular hinzu

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.

Inhaltsverzeichnis
 

• Schritt 1: Angular-Projekt erstellen
• Schritt 2: Installieren Sie das ngx-pagination-Modul in Angular
• Schritt 3: Paginierungsmodul importieren und registrieren
• Schritt 4: Style Table mit Bootstrap
• Schritt 5: Angular Data Service einrichten
• Schritt 6: Winkelpaginierung in der Tabelle hinzufügen
• Schritt 7: Starten Sie die Angular-Anwendung

Schritt 1: Angular-Projekt erstellen

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

Schritt 2: Installieren Sie das ngx-pagination-Modul in Angular

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

Schritt 3: Paginierungsmodul importieren und registrieren

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 {}

Schritt 4: Style Table mit Bootstrap

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"
]

Schritt 5: Angular Data Service einrichten

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);
  }
}

Schritt 6: Winkelpaginierung in der Tabelle hinzufügen

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>

Schritt 7: Starten Sie die Angular-Anwendung

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.