web-dev-qa-db-fra.com

Inclure les boutons et la pagination dans le pied de page du tableau des matériaux

J'utilise Angular Material Table et j'ai besoin d'un bouton de commande et du paginateur du tableau dans la ligne de pied de page du tableau, quelque chose comme ça enter image description here

Mon code est comme ça en fait

<div class="example-table-container mat-elevation-z8">

  <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
    <!-- DataSource's displayedColumns -->
    <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
      <th mat-header-cell *matHeaderCellDef> {{column}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>


    <!-- Exporter column -->
    <ng-container matColumnDef="exporter">
      <td mat-footer-cell *matFooterCellDef colspan="2">
        <button class="btn btn-primary" (click)="exportCsv(dataSource)">
          <i class="material-icons" title="Exporter en CSV">save_alt </i>
        </button>
      </td>
    </ng-container>

    <!-- Paginator column -->
    <ng-container matColumnDef="paginator">
      <td mat-footer-cell *matFooterCellDef colspan="3">
        <mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>

    <tr mat-footer-row *matFooterRowDef="['exporter', 'paginator']"></tr>

  </table>
</div>

Comme vous pouvez le voir, j'ai déplacé le <mat-paginator> élément à l'intérieur d'un td... Mais cela a cassé le paginateur car il ne pagine plus la table ... (vous voyez "0 sur 0" et désactivez les boutons de pagination) ... quand je mets en dehors de l'élément table, le paginateur revient à la normale ...

Comment placer correctement le paginateur dans la ligne de pied de page?

angularpaginationangular-materialangular-material-table
7
Serge

Enfin, j'ai utilisé une barre d'outils, si quelqu'un a le même problème:

  </table>

  <mat-toolbar>
    <mat-toolbar-row>
      <mat-icon (click)="exportCsv(dataSource)" title="Export as CSV">save_alt</mat-icon>
      <span class="example-spacer"></span>
      <mat-paginator class="paginator" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
    </mat-toolbar-row>
  </mat-toolbar>

</div>

qui a donné: enter image description here

14
Serge

J'ai résolu ce problème en affectant le paginator de ma source de données dans ngAfterViewInit():

ngAfterViewInit(): void {
  this.tableDataSource.paginator = this.paginator;
}
0
Jesper