web-dev-qa-db-ja.com

マテリアルテーブルフッターにボタンとページネーションを含める

Angular Material Tableを使用し、コマンドボタンと、テーブルのフッター行にあるテーブルのページネータが必要です。このようなもの enter image description here

私のコードは実際にこのようなものです

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

ご覧のとおり、<mat-paginator>要素はtd...内にありますが、これはテーブルのページ付けを行わないためページ付け機能を壊しました...（「0 of 0」が表示され、ページ付けボタンが無効になります）... table要素の外側に戻ると、ページネータは通常に戻ります...

ページ区切りをフッター行内に正しく配置する方法は？

angularpaginationangular-materialangular-material-table
7
Serge

最後に、誰かが同じ問題を抱えている場合、ツールバーを使用しました。

  </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>

それは与えました： enter image description here

14
Serge

データソースのpaginatorをngAfterViewInit()に割り当てることで、この問題を解決しました。

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