web-dev-qa-db-fra.com

Comment utiliser la pagination à partir de matériel angulaire?

Je suis novice dans angular et j'essaie d'implémenter la pagination dans mon application. J'essaie d'utiliser ce composant matériel.

Avec le code ci-dessous, je peux obtenir length, pagesize et pageSizeOptions dans mon fichier .ts

<md-paginator [length]="length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
</md-paginator>

export class PaginatorConfigurableExample {

  length = 100;
  pageSize = 10;
  pageSizeOptions = [5, 10, 25, 100];

  }
}

mais je n'arrive pas à déclencher une fonction pour modifier les données du tableau ci-dessus lorsque la page est modifiée. De plus, comment utiliser les méthodes nextPage, previousPage, hasNextPage et hasPreviousPage?

angularpaginationangular-material
16
HeisenBerg

Je me bats avec le même ici. Mais je peux vous montrer ce que j’ai fait faire des recherches . Fondamentalement, vous commencez par ajouter l’événement page @Output dans le fichier foo.template.ts :

 <md-paginator #paginator
                [length]="length"
                [pageIndex]="pageIndex"
                [pageSize]="pageSize"
                [pageSizeOptions]="[5, 10, 25, 100]"
                (page)="pageEvent = getServerData($event)"
                >
 </md-paginator>

Et plus tard, vous devez ajouter l'attribut pageEvent dans la classe foo.component.ts et les autres pour gérer les exigences de pagination:

pageEvent: PageEvent;
datasource: null;
pageIndex:number;
pageSize:number;
length:number;

Et ajoutez la méthode qui va récupérer les données du serveur:

ngOnInit() {
   getServerData(null) ...
}

public getServerData(event?:PageEvent){
  this.fooService.getdata(event).subscribe(
    response =>{
      if(response.error) {
        // handle error
      } else {
        this.datasource = response.data;
        this.pageIndex = response.pageIndex;
        this.pageSize = response.pageSize;
        this.length = response.length;
      }
    },
    error =>{
      // handle error
    }
  );
  return event;
}

Ainsi, chaque fois que vous cliquez sur la pagination, vous activez la méthode getServerData (..) qui appelle foo.service.ts récupère toutes les données requises. Dans ce cas, vous n'avez pas besoin de gérer les événements nextPage et nextXXX car ils seront automatiquement calculés lors du rendu de la vue.

J'espère que cela peut vous aider. Faites-moi savoir si vous avez eu du succès. =]

25
aelkz

Hé alors je suis tombé sur ça et je l’ai fait, voici comment:

dans mon composant.html 

<mat-paginator #paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true" [length]="totalSize"
    [pageIndex]="currentPage" (page)="pageEvent = handlePage($event)">
</mat-paginator>

Dans mon composant.ts 

public array: any;
public displayedColumns = ['', '', '', '', ''];
public dataSource: any;    

public pageSize = 10;
public currentPage = 0;
public totalSize = 0;

@ViewChild(MatPaginator) paginator: MatPaginator;

constructor(private app: AppService) { }

ngOnInit() {
  this.getArray();
}

public handlePage(e: any) {
  this.currentPage = e.pageIndex;
  this.pageSize = e.pageSize;
  this.iterator();
}

private getArray() {
  this.app.getDeliveries()
    .subscribe((response) => {
      this.dataSource = new MatTableDataSource<Element>(response);
      this.dataSource.paginator = this.paginator;
      this.array = response;
      this.totalSize = this.array.length;
      this.iterator();
    });
}

private iterator() {
  const end = (this.currentPage + 1) * this.pageSize;
  const start = this.currentPage * this.pageSize;
  const part = this.array.slice(start, end);
  this.dataSource = part;
}

Tout le travail de pagination est effectué à partir de la méthode iterator. Cette méthode calcule les skip et take et les assigne à dataSource pour la table Material.

7
Wesley Coetzee

Un autre moyen de lier Angular Paginator à la table de données à l'aide de Slice Pipe.Here, les données ne sont extraites qu'une seule fois du serveur.

Vue: 

 <div class="col-md-3" *ngFor="let productObj of productListData | 
     slice: lowValue : highValue">
       //actual data dispaly  
 </div>

<mat-paginator [length]="productListData.length" [pageSize]="pageSize" 
   (page)="pageEvent = getPaginatorData($event)">
</mat-paginator>

Composant 

    pageIndex:number = 0;
    pageSize:number = 50;
    lowValue:number = 0;
    highValue:number = 50;       

  getPaginatorData(event){
     console.log(event);
     if(event.pageIndex === this.pageIndex + 1){
        this.lowValue = this.lowValue + this.pageSize;
        this.highValue =  this.highValue + this.pageSize;
       }
    else if(event.pageIndex === this.pageIndex - 1){
       this.lowValue = this.lowValue - this.pageSize;
       this.highValue =  this.highValue - this.pageSize;
      }   
       this.pageIndex = event.pageIndex;
 }
5
Asridh Kumar

Le problème de la question initiale est que vous ne capturez pas l'événement "page". Pour résoudre ce problème, vous devez ajouter (page)='yourEventHandler($event) 'en tant qu'attribut dans la balise md-paginator.

vérifier un exemple de travail ici

Vous pouvez également consulter la documentation de l'API ici

2
LH7

Composant:

import { Component,  AfterViewInit, ViewChild } from @angular/core;
import { MatPaginator } from @angular/material;

export class ClassName implements AfterViewInit {
    @ViewChild(MatPaginator) paginator: MatPaginator;
    length = 1000;
    pageSize = 10;
    pageSizeOptions: number[] = [5, 10, 25, 100];

    ngAfterViewInit() {
        this.paginator.page.subscribe(
           (event) => console.log(event)
    );
}

HTML

<mat-paginator 
   [length]="length"
   [pageSize]="pageSize" 
   [pageSizeOptions]="pageSizeOptions"
   [showFirstLastButtons]="true">
</mat-paginator>
0
Viree

Après avoir passé quelques heures là-dessus, je pense que c’est la meilleure façon d’appliquer la pagination. Et plus important encore, cela fonctionne. Ceci est mon code de pagination <mat-paginator #paginatoR [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">

Dans mon composant @ViewChild(MatPaginator) paginator: MatPaginator; pour voir l'enfant et enfin vous devez lier le paginateur à la table dataSource et voici comment cela se fait ngAfterViewInit() {this.dataSource.paginator = this.paginator;} si cela fonctionne pour vous alors marquez ceci comme réponse.

0
Chetan Sharma