同一张桌子上有多个分页器答案

【问题标题】：Multiple paginators on same table同一张桌子上有多个分页器
【发布时间】：2019-08-29 10:37:24
【问题描述】：

我在使用有角材料开发的桌子上使用分页。我使用此处描述的 mat-paginator 在桌子上进行了分页： https://material.angular.io/components/paginator/overview

一个分页器在我的桌子上运行良好。

my_app.ts

import { Component, ChangeDetectorRef, ViewChild, Input, OnChanges} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';
@ViewChild(MatPaginator) paginator: MatPaginator;

this.dataSource.data = this.tableData; // Assigning table data to datasource
this.dataSource.paginator = this.paginator;

my_app.html

<table mat-table [dataSource]="dataSource" *ngIf="tableData.length > 0">

//Column definitions

</table>
<mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator> <!-- Pagination of table using mat-paginator. -->

如果我做这样的事情。

my_app.html

 <mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator> <!-- Pagination of table using mat-paginator. -->
<table mat-table [dataSource]="dataSource" *ngIf="tableData.length > 0">

//Column definitions

</table>

<mat-paginator [pageSizeOptions]="[50, 100, 200]" showFirstLastButtons></mat-paginator> <!-- Pagination of table using mat-paginator. -->

只有第一个分页有效，第二个分页不能在同一张桌子上工作。

表格上面的分页器是这样的。

表格下方的分页器如下所示。

如您所见，表格上方的分页器工作正常，但下方分页器中的数据源发生了变化，即使在具有相同数据源之后，它仍将数据显示为“0 of 0”。

我想将两个分页器绑定到表数据，也想相互绑定。

我的目标是让两个分页器在同一张桌子上工作。如果任何人在“pageSizeOptions”或“页码”方面发生变化，则两个分页器必须同时更改。此外，更改页面上的表格页面或行号（如预期的那样）。

【问题讨论】：

标签： angular typescript pagination

【解决方案1】：

在 HTML 中

<mat-paginator
    #paginatorTop
    [length]="dataSource.totalElements"
    [pageSize]="dataSource.pageSize"
    [pageSizeOptions]="[10, 25, 100]"
    [showFirstLastButtons]="true">
</mat-paginator>
<mat-table>...........</mat-table>
<mat-paginator
    #paginatorBottom
    [length]="dataSource.totalElements"
    [pageSize]="dataSource.pageSize"
    [pageSizeOptions]="[10, 25, 100]"
    [showFirstLastButtons]="true">
</mat-paginator>

在组件 TS 中

@ViewChild('paginatorTop') paginatorTop: MatPaginator;
@ViewChild('paginatorBottom') paginatorBottom: MatPaginator;


ngAfterViewInit() {
  this.paginatorTop.page.pipe(
    tap(() => { 
      this.loadCollection(
        this.paginatorTop.pageIndex,
        this.paginatorTop.pageSize,
        ...
        ...
        ...
      );
      this.paginatorBottom.pageIndex = this.paginatorTop.pageIndex;
      this.paginatorBottom.pageSize = this.paginatorTop.pageSize;
    })
  )
  .subscribe();

  this.paginatorBottom.page.pipe(
    tap(() => { 
      this.loadCollection(
        this.paginatorBottom.pageIndex,
        this.paginatorBottom.pageSize,
        ...
        ...
        ...
      );
      this.paginatorTop.pageIndex = this.paginatorBottom.pageIndex;
      this.paginatorTop.pageSize = this.paginatorBottom.pageSize;
    })
  )
  .subscribe();
}

【讨论】：