Comment utiliser paginator de matériel angulaire?

Je suis nouveau sur angulaire et en essayant de mettre en œuvre la pagination dans mon application. Je suis en train d'utiliser cette composante matérielle.

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

<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. Aussi, comment puis-je utiliser le nextPage, previousPage, hasNextPage, et hasPreviousPage méthodes?

cochez cette plunker cela peut vous aider . Pour la pagination, vous pouvez également utiliser cette lib je me sens il est beaucoup plus simple [Lien](import {NgxPaginationModule} "ngx-pagination";).Je l'ai utilisé ici
êtes-vous sûr que vous avez posté le droit plunker lien?
désolé, mais toujours pas le droit plunker je pense, qu'il ouvre à la plnkr.co/modifier/?p=preview
vérifier ce qu'il n'était pas sauvé, il plunker
Je suis intéressé si il y a une meilleure solution maintenant, la gestion directe de certains événements, comme clicked nextPage?

OriginalL'auteur HeisenBerg | 2017-07-26

Je suis aux prises avec le même ici. Mais je peux vous montrer ce que j'ai fait quelques recherches.
Fondamentalement, vous devez d'abord commencer à ajouter la page @événement de Sortie dans le foo.de modèle.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 le pageEvent attribut dans la foo.composante.ts classe et les autres pour gérer paginator exigences:

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

Et ajouter 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;
}

Donc, en gros, à chaque fois que vous cliquez sur le paginator, vous activerez la getServerData(..) méthode qui vous permettra d'appeler foo.service.ts d'obtenir toutes les données nécessaires. Dans ce cas, vous n'avez pas besoin de gérer nextPage et nextXXX événements, car il sera calculé automatiquement sur le rendu de l'affichage.

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

La (page) de l'événement n'est pas déclenché pour moi.

OriginalL'auteur aelkz

Hé oui, je suis tombé sur ce et il a obtenu de travail, voici comment:

à l'intérieur de mon component.html

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

À l'intérieur de 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;
}

Tous la pagination travail est fait à partir de l'intérieur de la iterator méthode. Cette méthode fonctionne le skip et take et ayants droit que pour les dataSource pour le Matériau de la table.

OriginalL'auteur Wesley Coetzee

Une autre façon de liaison Angulaire Paginator avec le tableau de données à l'aide de la Tranche de la Pipe.Ici les données sont lues qu'une seule fois à partir 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;
 }

Nice one, si vous voulez juste le côté client de la pagination. M'a aidé. Merci @Asridh

OriginalL'auteur Asridh Kumar

Vous devez vous connecter pour publier un commentaire.