javascript - 具有单个或多个数据源的两个垫分页器无法正常工作

Question

我有一个 mat-table，每页最多可以显示 5/10/15 个条目。一开始，我在底部有一个垫子分页器，效果很好。现在，我被要求在表格的顶部设置一个分页器，在表格的底部设置另一个分页器，这样如果用户正在寻找位于以下位置的条目，则无需一直向下滚动即可到达分页器顶部。

我尝试将两个分页器链接到同一数据源。但它没有奏效。因此，尝试创建2个数据源，但它也有一个限制。

唯一的限制是底部的分页器无法更改每页的项目，因为没有一种方法可以让我控制该属性。

此外，我无法直接设置页面索引或每页项目属性(表格未刷新)，因此所有移动都是通过一些逻辑和分页器方法(如 previousPage() 或 lastPage())来实现的。

有人可以帮我解决这个问题吗？我对单个或多个数据源的解决方案很满意。

工作代码 -> STACKBLITZ

<mat-paginator #paginatorTop (page)="pageEvent = handlePageTop($event)" [length]="length" [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>

<mat-paginator #paginatorBottom (page)="pageEvent = handlePageBottom($event)" [length]="length" [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>

app.component.ts

ngOnInit() {
    this.dataSource2.paginator = this.bottomPaginator;
    this.dataSource.paginator = this.topPaginator;

    this.topPaginator.length = this.dataSource.data.length;
    this.bottomPaginator.length = this.dataSource2.data.length;
  }


  public handlePageTop(e: any) {
    let {pageSize} = e;

    this.bottomPaginator.pageSize = pageSize;

    if(!this.topPaginator.hasNextPage()){
      this.bottomPaginator.lastPage();
    }else if(!this.topPaginator.hasPreviousPage()){
      this.bottomPaginator.firstPage();
    }else{
      if(this.topPaginator.pageIndex < this.bottomPaginator.pageIndex){
        this.bottomPaginator.previousPage();
      } else  if(this.topPaginator.pageIndex >this.bottomPaginator.pageIndex){
        this.bottomPaginator.nextPage();
      }
    }
  }

  public handlePageBottom(e: any) {

    if(!this.bottomPaginator.hasNextPage()){
      this.topPaginator.lastPage();
    }else if(!this.bottomPaginator.hasPreviousPage()){
      this.topPaginator.firstPage();
    }else{
      if(this.bottomPaginator.pageIndex < this.topPaginator.pageIndex){
        this.topPaginator.previousPage();
      } else  if(this.bottomPaginator.pageIndex > this.topPaginator.pageIndex){
        this.topPaginator.nextPage();
      }
    }
  }

Answer 1

无需使用两个分页器对您的代码进行了一些更改，请检查。

这是我的 stackblitz 代码:- https://stackblitz.com/edit/multiple-paginators-svwwfj

希望这有帮助!