在 Material Table 页脚中包含按钮和分页器
Include Buttons and Paginator in the Material Table Footer
我使用 Angular Material Table 并且我需要一个命令按钮和 table 的页脚行中的 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
中...但这破坏了分页器,因为它不再对 table 进行分页... (你看到“0 of 0”并禁用分页按钮)...当我把它放回 table
元素之外时,分页器 returns 正常...
如何正确地将分页器放在页脚行内?
最后,我用了一个工具栏,如果有人有同样的问题:
</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>
给出了:
通过在 mat-paginator 中添加 width:100%,您将获得此设计。
示例:.
我通过在 ngAfterViewInit()
中分配数据源的 paginator
解决了这个问题:
ngAfterViewInit(): void {
this.tableDataSource.paginator = this.paginator;
}
好了,分页器作为粘性页脚:
注意:我们的想法是只为一列放置一个页脚单元格(这里我们取第一列),然后定义一个全宽的 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>
另一种选择是使用 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>
我使用 Angular Material Table 并且我需要一个命令按钮和 table 的页脚行中的 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
中...但这破坏了分页器,因为它不再对 table 进行分页... (你看到“0 of 0”并禁用分页按钮)...当我把它放回 table
元素之外时,分页器 returns 正常...
如何正确地将分页器放在页脚行内?
最后,我用了一个工具栏,如果有人有同样的问题:
</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>
给出了:
通过在 mat-paginator 中添加 width:100%,您将获得此设计。 示例:.
我通过在 ngAfterViewInit()
中分配数据源的 paginator
解决了这个问题:
ngAfterViewInit(): void {
this.tableDataSource.paginator = this.paginator;
}
好了,分页器作为粘性页脚:
注意:我们的想法是只为一列放置一个页脚单元格(这里我们取第一列),然后定义一个全宽的 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>
另一种选择是使用 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>