作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我使用 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
之外时元素,分页器恢复正常...
如何正确地将分页器放在页脚行内?
最佳答案
最后,我用了一个工具栏,如果有人有同样的问题:
</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>
关于angular - 在 Material 表页脚中包含按钮和分页器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52315739/
我是一名优秀的程序员,十分优秀!