Angular中mat-paginator分页切换及页长选择触发方法实现

步骤1：绑定分页器事件 #

修改HTML中的mat-paginator，添加page事件绑定，当页码切换或页长改变时触发自定义处理方法：

<mat-paginator 
    [pageSizeOptions]="[5, 10, 15, 20]"
    [pageSize]="5"
    aria-label="Select page"
    (page)="handlePageChange($event)"
></mat-paginator>

步骤2：添加分页器引用与事件处理逻辑 #

在TS文件中，通过ViewChild获取分页器实例，实现事件处理方法并传递参数给nextpageData：

import { ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';

// ... 已有代码

@ViewChild(MatPaginator) paginator!: MatPaginator;

// ...

handlePageChange(event: PageEvent) {
  // 将页长和当前页码索引传入分页API方法（pageIndex从0开始）
  this.nextpageData(event.pageSize, event.pageIndex);
}

nextpageData(pagesize: number, index: number) {
  // 在此编写API调用逻辑，示例：
  // this.apiService.fetchData(pagesize, index).subscribe(res => {
  //   this.searchData = res;
  //   this.dataSource.data = this.searchData; // 更新表格数据源
  // });
}

步骤3：调整初始化逻辑（关键） #

因为是API分页，初始化时需要主动调用nextpageData获取第一页数据，而非用空数组初始化：

ngOnInit(): void {
  // 初始化时加载第一页，默认页长5、索引0
  this.nextpageData(5, 0);
}

// 可将分页配置逻辑整合到数据更新后
nextpageData(pagesize: number, index: number) {
  this.apiService.fetchData(pagesize, index).subscribe(res => {
    this.searchData = res;
    this.dataSource = new MatTableDataSource<any>(this.searchData);
    this.dataSource.paginator = this.paginator;
    this.dataObs$ = this.dataSource.connect();
  });
}

注意事项 #

• 若后端接口页码从1开始，需将index转换为index + 1后传入
• 每次API返回新数据后，必须更新dataSource的数据源，确保表格内容同步
• 确认已在Angular模块中导入MatPaginatorModule，否则分页器无法正常工作

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