如何配置mat-paginator实现分页请求而非一次性拉取全部数据

mat-paginator原生支持服务端分页需求，不需要拉取全量数据到前端做本地分页，通过监听翻页事件发起对应范围的接口请求即可实现需求。

核心逻辑 #

仅在需要渲染某一页数据时，向服务端传递当前页码、每页条数两个参数，请求该页的对应数据，前端仅渲染当前页返回的内容，同时更新分页器的总数据量即可。

1. 模板配置 #

在分页器组件上绑定总数据量、默认页长、可选页长参数，同时监听page事件触发数据加载方法：

<!-- 表格部分代码省略，数据源仅绑定当前页数据即可 -->
<mat-paginator 
  [length]="totalCount"
  [pageSize]="10"
  [pageSizeOptions]="[5, 10, 25, 100]"
  (page)="loadServerData($event)"
  showFirstLastButtons>
</mat-paginator>

2. 组件逻辑实现 #

定义对应变量接收分页状态、当前页数据、总数据量，在翻页事件触发时携带参数发起接口请求：

import { PageEvent } from '@angular/material/paginator';

// 组件类内部代码
currentPageData: any[] = [];
// 总数据量，由接口返回赋值
totalCount = 0;
// 默认每页条数
defaultPageSize = 10;

ngOnInit(): void {
  // 组件初始化时加载第一页数据
  this.loadServerData({
    pageIndex: 0,
    pageSize: this.defaultPageSize
  } as PageEvent);
}

loadServerData(event: PageEvent): void {
  const requestParams = {
    page: event.pageIndex,
    pageSize: event.pageSize
  };
  // 替换为你项目中的实际数据请求方法
  this.yourDataService.getPagedList(requestParams).subscribe(res => {
    // 接口返回当前页数据赋值给表格数据源
    this.dataSource.data = res.dataList;
    // 接口返回总数据量赋值给分页器
    this.totalCount = res.total;
  });
}

注意事项 #

• mat-paginator的pageIndex默认从0开始计数，如果后端接口要求页码从1开始，请求时需要将pageIndex + 1后再传给后端
• 无需额外绑定[pageIndex]属性即可实现自动页码状态维护，如有手动跳转页码的需求再自行绑定
• 若页面存在筛选、搜索等参数，每次参数变更后需将pageIndex重置为0，再重新发起第一页的请求

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