如何在角材料表中的单个表上使用2分页?

时间:2019-03-02 12:51:37

标签: angular angular-material angular-material-table

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

页眉分页仅显示带下拉菜单的“每页项”。 页脚分页将显示箭头和全部。

当我添加2个分页时,第二个不起作用。

请参阅屏幕截图 enter image description here

谢谢。

1 个答案:

答案 0 :(得分: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);
}

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