自定义 angular material 个分页器输入

Question

我正在使用 Angular Material 分页器，这是我的 mat 分页器 html 代码

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

我的分页器看起来像这样

问题是我有一个巨大的数据列表来为分页器显示这么多页面，我正在寻找一种方法来自定义分页器并添加一个输入来指示我要显示的页数，是否有任何编码解决方案？

Answer 1

分页器中没有内置任何东西可以做到这一点。但是你可以添加自定义输入，通过代码设置页码。

@ViewChild(MatPaginator) paginator: MatPaginator;
goToPage(pageNumber: number) {
  // this updates the paginator component
  this.paginator.pageIndex = pageNumber - 1;

  // emit an event so that the table will refresh the data
  this.paginator.page.next({
    pageIndex: this.paginator.pageIndex,
    pageSize: this.paginator.pageSize,
    length: this.paginator.length
  });
}

https://stackblitz.com/edit/mat-paginator-select-page?embed=1

自定义 angular material 个分页器输入

Customize angular material paginator inputs

angular-material

angular

angular-material-paginator