Introduction à la Pagination avec PrimeNG en Angular

La gestion de l'affcihage de grandes collections de données est une problématique courante dans le développement d'applications web. La pagination permet de diviser ces données en blocs plus petits et maniables, améliorant ainsi les performances et l'expérience utilisateur. Cet article présente une méthode pour implémenter la pagination dans une application Angular en utilisant les composants de la bibliothèque PrimeNG, notamment p-table pour l'affichage tabulaire et p-paginator pour les contrôles de navigation.

1. Intégration du Module Paginator de PrimeNG

Pour bénéficier des fonctionnalités de pagination offertes par PrimeNG, vous devez importer le PaginatorModule dans le module Angular qui hébergera votre composant. Généralement, il s'agit de l'AppModule ou d'un module de fonctionnalités dédié.

// Dans le fichier du module (par exemple, app.module.ts ou un module de fonctionnalité)
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PaginatorModule } from 'primeng/paginator'; // Importation du module de pagination
import { TableModule } from 'primeng/table'; // Souvent nécessaire avec p-table

@NgModule({
  declarations: [
    // Vos composants ici
  ],
  imports: [
    CommonModule,
    PaginatorModule, // Ajout de PaginatorModule aux imports
    TableModule // Ajout de TableModule pour p-table
  ],
  exports: [
    // Si vous souhaitez exporter PaginatorModule pour d'autres modules
  ]
})
export class MonModuleApplicatif { }

2. Conception de la Vue HTML avec p-table et p-paginator

La structure HTML de votre composant inclura un tableau PrimeNG (p-table) pour afficher les données filtrées et le composant de pagination (p-paginator) pour interagir avec les contrôles de page. Le p-table affichera uniquement la tranche de données correspondant à la page courante, tandis que le p-paginator gérera l'état de la pagination.

<div class="card">
  <p-table [value]="donneesDeLaPageCourante" [tableStyle]="{ 'min-width': '50rem' }">
    <ng-template pTemplate="header">
      <tr>
        <th>Identifiant</th>
        <th>Nom Complet</th>
        <th>Age</th>
        <th>Date de Naissance</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-element>
      <tr>
        <td>{{ element.id }}</td>
        <td>{{ element.nomComplet }}</td>
        <td>{{ element.age }}</td>
        <td>{{ element.dateNaissance }}</td>
      </tr>
    </ng-template>
  </p-table>

  <p-paginator
    [first]="indexPremierElementPage"
    [rows]="elementsParPage"
    [totalRecords]="nombreTotalElements"
    [rowsPerPageOptions]="[5, 10, 20, 50]"
    (onPageChange)="handlePageChange($event)">
  </p-paginator>
</div>

3. Logique TypeScript pour la Gestion de la Pagination

Le composant Angular (fichier .ts) orchestrera la logique de pagination. Il contiendra la source de données complète, les propriétés d'état de la pagination, et une méthode pour mettre à jour les données affichées en fonction des événements du p-paginator.

import { Component, OnInit } from '@angular/core';
import { PaginatorState } from 'primeng/paginator'; // Interface fournie par PrimeNG pour les événements de pagination

// Interface pour le type de données affiché dans le tableau
interface EnregistrementDeDonnees {
  id: number;
  nomComplet: string;
  age: number;
  dateNaissance: string;
}

@Component({
  selector: 'app-tableau-paginations', // Sélecteur du composant
  templateUrl: './tableau-paginations.component.html',
  styleUrls: ['./tableau-paginations.component.scss']
})
export class TableauPaginationsComponent implements OnInit {

  tousLesEnregistrements: EnregistrementDeDonnees[]; // Contient toutes les données
  donneesDeLaPageCourante: EnregistrementDeDonnees[]; // Contient les données à afficher sur la page actuelle

  indexPremierElementPage: number = 0; // Index du premier élément de la page actuelle (pour p-paginator)
  elementsParPage: number = 10; // Nombre d'éléments affichés par page
  nombreTotalElements: number = 0; // Nombre total d'enregistrements

  constructor() { }

  ngOnInit(): void {
    // Simulation d'une source de données importante
    this.tousLesEnregistrements = this.genererDonneesExemple(50); // Génère 50 enregistrements

    this.nombreTotalElements = this.tousLesEnregistrements.length;
    this.chargerDonneesPourAffichage(); // Charge les données initiales pour la première page
  }

  // Génère des données d'exemple pour la démonstration
  private genererDonneesExemple(count: number): EnregistrementDeDonnees[] {
    const data: EnregistrementDeDonnees[] = [];
    for (let i = 1; i <= count; i++) {
      data.push({
        id: i,
        nomComplet: `Personne ${i}`,
        age: 20 + (i % 15),
        dateNaissance: `199${(i % 10)}-${(i % 12) + 1}-${(i % 28) + 1}`
      });
    }
    return data;
  }

  // Méthode pour charger la tranche de données à afficher
  chargerDonneesPourAffichage(): void {
    const debut = this.indexPremierElementPage;
    const fin = this.indexPremierElementPage + this.elementsParPage;
    this.donneesDeLaPageCourante = this.tousLesEnregistrements.slice(debut, fin);
    console.log(`Affichage de ${this.donneesDeLaPageCourante.length} éléments. De l'index ${debut} à ${fin-1}.`);
  }

  // Gère l'événement de changement de page du composant p-paginator
  handlePageChange(event: PaginatorState): void {
    // Les propriétés 'first' et 'rows' peuvent être null, donc utilisation de l'opérateur de coalescence nulle
    this.indexPremierElementPage = event.first ?? 0;
    this.elementsParPage = event.rows ?? this.elementsParPage;

    console.log(`Événement de pagination reçu: first=${event.first}, rows=${event.rows}`);
    this.chargerDonneesPourAffichage(); // Met à jour les données à afficher
  }
}

4. Versions des Dépendances

Cet exemple a été élaboré en utilisant les versions suivantes des principales bibliothèques :

  {
    "dependencies": {
      "@angular/core": "^14.0.0",
      "primeng": "^14.0.0-rc.1"
    }
  }