在材质表页脚中包含按钮和分页器

Posted 2023-03-10

【中文标题】在材质表页脚中包含按钮和分页器

【英文标题】：Include Buttons and Paginator in the Material Table Footer

【发布时间】：2019-02-18 07:24:37

【问题描述】：

我使用 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> 元素移到了 td... 但这破坏了分页器，因为它不再对表格进行分页...（您会看到“0 of 0”并禁用分页按钮）......当我把它放回table元素之外时，分页器恢复正常......

如何正确地将分页器放在页脚行内？

【参考方案1】：

最后，我使用了工具栏，如果有人遇到同样的问题：

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

这给了：

【讨论】：

@JCAguilera 在mat-icon 和mat-paginator 之间带有自定义类example-spacer 的span 标记可以解决问题。您可以将fxFlex: 1 1 auto 放在该类中以使其工作，或者只需在要向右移动的东西之前使用`。

.mat-toolbar-row justify-content: space-between;这也可以解决问题。不需要 example-spacer

【参考方案2】：

你去吧，用分页器作为粘性页脚：

注意：这个想法是只为一列放置一个页脚单元格（这里我们取第一列），然后定义一个全宽的 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>

【参考方案3】：

另一种选择是使用 FlexBox。为了使示例更容易，它使用 Bootstrap 显示

<div
      class="d-flex flex-column flex-md-row"
      [hidden]="dataSource && dataSource?.data?.length == 0"
    >
      <button
        (click)="onClickAdd()"
        mat-raised-button
        color="primary"
        class="align-self-center"
        type="button"
        *ngIf="selection?.selected?.length !== 0"
      >
        Add all selected
      </button>
      <mat-paginator
        class="ml-auto"
        [length]="totalRows"
        [pageSize]="tableInitPageSize"
        [pageSizeOptions]="tablePageSizeOptions"
      >
      </mat-paginator>
    </div>

【参考方案4】：

我通过在ngAfterViewInit()中分配我的数据源的paginator解决了这个问题：

ngAfterViewInit(): void 
  this.tableDataSource.paginator = this.paginator;

【参考方案5】：

通过在 mat-paginator 中添加 width:100% 你会得到这个设计。 示例：.

【讨论】：

请编辑你的答案，不太清楚你想说什么，你在说什么风格？ OP询问如何将分页器放在页脚行中，您解释了如何使分页器适应整个容器宽度。