如何在角材料表中对单个表使用 2 分页？答案

【问题标题】：How to use 2 pagination for single table in angular material table?如何在角材料表中对单个表使用 2 分页？
【发布时间】：2019-07-24 07:37:39
【问题描述】：

我正在 angular6 中使用 angular 材质创建一个应用程序。如何在单个表格中使用 2 个分页。我想在页眉和页脚都显示分页。

标题分页仅显示带有下拉菜单的“每页项目”。页脚分页将显示箭头和所有内容。

当我添加 2 个分页时，第二个不工作。

请参考截图

谢谢。

【问题讨论】：

请求你创建一个stackblitz

标签： angular angular-material angular-material-table

【解决方案1】：

我认为目前没有官方解决方案，您必须自己同步两个分页器。

根据需要配置第一个分页器并将所有输入参数添加到第二个：

<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

<table mat-table [dataSource]="dataSource"> <!-- ... --> </table>

<mat-paginator (page)="syncPrimaryPaginator($event)" 
  [pageSize]="paginator.pageSize" [pageIndex]="paginator.pageIndex"
  [length]="paginator.length" [pageSizeOptions]="paginator.pageSizeOptions"></mat-paginator>

在你的组件中添加一个方法来同步第一个分页器，如果使用第二个：

dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

@ViewChild(MatPaginator) paginator: MatPaginator;

ngOnInit() {
  this.dataSource.paginator = this.paginator;
}

syncPrimaryPaginator(event: PageEvent) {
  this.paginator.pageIndex = event.pageIndex;
  this.paginator.pageSize = event.pageSize;
  this.paginator.page.emit(event);
}

我 fork this official example 并对其进行了更新以重现您的问题。 Here 是我的解决方案。

【讨论】：

谢谢你，Samuel P。它对我有用。另一个帮助我可以显示页码，例如引导分页而不是箭头
官方没有实现这一目标的选项 (docs)。也许您可以从角度源创建自己的分页器。