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

Question

我在桌子上使用分页材质进行分页。 我使用在这里描述的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之0”。

我想将两个分页器都绑定到表数据，也要彼此绑定。

我的目标是让两个分页器都在同一张桌子上工作。如果有人更改了“ pageSizeOptions”或“页码”，则两个分页器必须同时更改。此外，按预期更改页面上的表页或行号。

Answer 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();
}