Включить кнопки и пагинатор в нижний колонтитул таблицы материалов

Я использую Angular Material Table, и мне нужна командная кнопка и пагинатор таблицы в нижнем колонтитуле таблицы, что-то вроде этого введите описание изображения здесь

Мой код на самом деле такой

<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> внутрь _3 _... Но это сломало пагинатор, так как он больше не разбивает таблицу на страницы ... (вы видите "0 из 0" и отключаете кнопки разбивки на страницы) ... когда Я вернул его за пределы элемента table, пагинатор вернется в нормальное состояние ...

Как правильно разместить пагинатор в строке нижнего колонтитула?


angular pagination angular-material angular-material-table
person serge    schedule 13.09.2018    source источник

Ответы (4)


arrow_upward
37
arrow_downward

Наконец, я использовал панель инструментов, если у кого-то такая же проблема:

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

который дал: введите описание изображения здесь

person serge    schedule 13.09.2018
comment
@JCAguilera Тег span с настраиваемым классом example-spacer между mat-icon и mat-paginator делает свое дело. Вы можете поместить fxFlex: 1 1 auto в этот класс, чтобы он заработал, или просто используйте `‹ span fxFlex ›‹/span› перед тем, что вы хотите переместить вправо. - person Akash Srivastav; 06.12.2018
comment
.mat-toolbar-row {justify-content: пробел между; } Это тоже поможет. Пример-распорка не требуется - person Jason Politis; 25.06.2019

arrow_upward
0
arrow_downward

Вот и все, с пагинатором в качестве липкого нижнего колонтитула:

Примечание: идея состоит в том, чтобы поместить ячейку нижнего колонтитула только для одного столбца (здесь мы берем первый), а затем определить ширину colspan.

<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>
      <td mat-footer-cell *matFooterCellDef colspan="20" when="column == displayedColumns[0]">
        <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="[displayedColumns[0]]; sticky: true"></tr>

  </table>
</div>
person Nicolas    schedule 23.11.2020

arrow_upward
-2
arrow_downward

Я решил эту проблему, назначив paginator моего источника данных в ngAfterViewInit():

ngAfterViewInit(): void {
  this.tableDataSource.paginator = this.paginator;
}
person Jesper    schedule 29.11.2018

arrow_upward
-6
arrow_downward

Добавив width: 100% в mat-paginator, вы получите этот дизайн. пример: .

person Rabin    schedule 29.11.2018
comment
пожалуйста, отредактируйте свой ответ, не совсем понятно, что вы пытаетесь сказать, о каком стиле вы говорите? OP спрашивает, как разместить пагинатор в строке нижнего колонтитула, вы объясняете, как подогнать пагинатор к полной ширине контейнера. - person serge; 29.11.2018