Angular Material表格如何绑定两个MatPaginator分页器？

当然可以实现！虽然Angular Material的MatTable确实只允许绑定一个MatPaginator实例，但我们可以通过同步两个分页器的状态来达到让它们共同控制同一个表格的效果。下面是具体的实现步骤和代码示例：

1. 在模板中添加两个分页器并绑定表格 #

首先在页面顶部和底部各放置一个MatPaginator，给它们分别设置模板引用变量，然后将表格的matPaginator绑定到其中一个分页器（比如底部的）：

<!-- 顶部分页器 -->
<mat-paginator #topPaginator
               [pageSizeOptions]="[5, 10, 20]"
               showFirstLastButtons>
</mat-paginator>

<!-- 表格 -->
<table mat-table [dataSource]="dataSource">
  <!-- 表格列定义示例 -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>
  
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> 名称 </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>
  
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

<!-- 底部分页器 -->
<mat-paginator #bottomPaginator
               [pageSizeOptions]="[5, 10, 20]"
               showFirstLastButtons>
</mat-paginator>

2. 在组件类中获取分页器引用并同步状态 #

通过@ViewChild获取两个分页器的实例，然后在组件初始化时同步它们的初始状态，同时监听分页事件来保持状态同步：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements AfterViewInit {
  displayedColumns: string[] = ['id', 'name'];
  dataSource = new MatTableDataSource<YourDataType>([]);

  @ViewChild('topPaginator') topPaginator!: MatPaginator;
  @ViewChild('bottomPaginator') bottomPaginator!: MatPaginator;

  // 用于避免同步时的循环触发事件
  private isSyncing = false;

  ngAfterViewInit() {
    // 将表格绑定到底部分页器
    this.dataSource.paginator = this.bottomPaginator;

    // 初始化同步两个分页器的状态
    this.syncPaginatorStates();

    // 监听顶部分页器操作，同步到底部
    this.topPaginator.page.subscribe(() => {
      if (!this.isSyncing) {
        this.isSyncing = true;
        this.bottomPaginator.pageIndex = this.topPaginator.pageIndex;
        this.bottomPaginator.pageSize = this.topPaginator.pageSize;
        this.isSyncing = false;
      }
    });

    // 监听底部分页器操作，同步到顶部
    this.bottomPaginator.page.subscribe(() => {
      if (!this.isSyncing) {
        this.isSyncing = true;
        this.topPaginator.pageIndex = this.bottomPaginator.pageIndex;
        this.topPaginator.pageSize = this.bottomPaginator.pageSize;
        this.isSyncing = false;
      }
    });
  }

  // 同步两个分页器的核心状态（总条数、页码、每页条数）
  syncPaginatorStates() {
    const totalDataCount = this.dataSource.data.length;
    this.topPaginator.length = totalDataCount;
    this.bottomPaginator.length = totalDataCount;

    this.topPaginator.pageIndex = this.bottomPaginator.pageIndex;
    this.topPaginator.pageSize = this.bottomPaginator.pageSize;
  }

  // 当数据更新时（比如重新加载、筛选），记得同步分页器状态
  refreshTableData(newData: YourDataType[]) {
    this.dataSource.data = newData;
    this.syncPaginatorStates();
  }
}

// 自定义数据类型示例
interface YourDataType {
  id: number;
  name: string;
}

3. 关键说明 #

• 状态同步逻辑：通过监听两个分页器的page事件，在其中一个状态变化时，手动同步另一个的pageIndex和pageSize，并用isSyncing变量避免循环触发事件。
• 表格绑定：表格只需要绑定一个分页器即可，因为两个分页器状态完全同步，表格的分页效果会同时响应两个分页器的操作。
• 数据更新处理：当表格数据发生变化时，必须调用syncPaginatorStates()同步两个分页器的length属性，确保分页器显示正确的总条数。

这样设置后，用户操作顶部或底部的分页器，表格都会做出对应的分页响应，两个分页器的状态也会保持完全一致，完美实现你想要的效果！

内容的提问来源于stack exchange，提问作者Miroslav