Angular中mat-paginator分页器按钮点击触发自定义函数的实现方法

可以实现，你可以通过绑定mat-paginator的page输出事件监听分页操作，判断为下一页点击时触发自定义逻辑，具体实现如下：

1. 修改HTML模板 #

给mat-paginator绑定page事件，事件会在任意分页按钮点击、页码/页长变化时触发：

<mat-paginator 
   [pageSize]="2"
   [pageSizeOptions]="[2, 4, 6]" 
   showFirstLastButtons
   (page)="handlePageEvent($event)">         
</mat-paginator>

2. 补充TypeScript逻辑 #

首先导入PageEvent类型，新增事件处理方法，通过页码变化判断是否为下一页操作：

// 需先导入PageEvent类型
import { PageEvent } from '@angular/material/paginator';

recordsDataTable:any[]=[ ];
recordsData !: MatTableDataSource<any>;

@ViewChild(MatPaginator) paginator!: MatPaginator;

ngAfterViewInit()
{
   this.userservice.getRecords()
   .subscribe(
     (x)=>
       { 
        this.recordsDataTable=x.data;
        this.recordsData= new MatTableDataSource(x.data); 
        // 如果需要保留默认分页功能，保留这行赋值；如果完全自定义分页逻辑，删掉这行
        this.recordsData.paginator = this.paginator;
       }
      )
}

// 分页事件处理方法
handlePageEvent(e: PageEvent) {
  // 判断规则：当前页码大于上一次页码即为下一页操作
  if (e.previousPageIndex !== undefined && e.pageIndex > e.previousPageIndex) {
    // 调用你的自定义逻辑
    this.yourCustomFunction();
  }

  // 若需要完全覆盖默认下一页行为，参考下方示例：
  /*
  if (e.previousPageIndex !== undefined && e.pageIndex > e.previousPageIndex) {
    // 自定义逻辑，例如请求后端分页接口
    this.userservice.getPageData(e.pageIndex, e.pageSize).subscribe(res => {
      this.recordsData.data = res.data;
      // 手动更新分页器参数，关闭事件发射避免循环触发
      this.paginator.pageIndex = e.pageIndex;
      this.paginator.length = res.totalCount;
    })
    // 阻止默认分页跳转
    return false;
  }
  */
}

// 你的自定义函数
yourCustomFunction() {
  console.log('下一页按钮被触发');
  // 这里写你自己的业务逻辑
}

3. 其他按钮判断扩展 #

如果需要判断其余三个分页按钮的触发，参考以下判断规则：

• 点击首页：e.pageIndex === 0
• 点击上一页：e.previousPageIndex !== undefined && e.pageIndex < e.previousPageIndex
• 点击尾页：e.pageIndex === Math.ceil(e.length / e.pageSize) - 1

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