Mat-table服务端分页切换后表格为空问题求助

核心问题原因 #

你遇到的问题本质是**MatTableDataSource自动接管了分页器的状态管理**，而服务端分页场景下不需要客户端再做数据切片：

• 当你给MatTableDataSource绑定paginator后，它会默认认为你使用的是客户端分页，自动根据分页器的pageIndex和pageSize对全量数据做切片。
• 但服务端分页返回的是当前页的单页数据（比如10条），当切换到第二页时，数据源会尝试去取索引10-19的数据，但你的数据源里只有0-9的10条数据，导致表格为空。
• 同时MatTableDataSource会自动将分页器的length设置为当前数据源的总条数（10条），覆盖了你手动绑定的totalRowCount。

修复方案 #

放弃让MatTableDataSource管理分页器，手动处理分页、排序事件，直接给数据源赋值当前页的数据即可。

修改后的代码示例 #

HTML模板

<mat-table
  #table
  [dataSource]="dataSource"
  matSort
  matSortActive="id"
  matSortDirection="asc"
  matSortDisableClear
  (sortChange)="handleSortChange($event)"
>
  <!-- 你的表格列定义 -->
</mat-table>

<mat-paginator
  #paginator
  [length]="totalRowCount"
  [pageSize]="10"
  [pageSizeOptions]="pageSizeOptions"
  (page)="handlePageChange($event)"
></mat-paginator>

TypeScript逻辑

// 初始化数据源，不要绑定paginator
this.dataSource = new MatTableDataSource();
this.columns = columns;
this.columnHeaders = columnHeaders;

// 初始加载第一页数据
this.loadTableData(0, 10, 'id', 'asc');

// 分页切换处理
async handlePageChange(event: PageEvent) {
  const sortActive = this.sort.active;
  const sortDirection = this.sort.direction;
  // 调用服务获取对应页的数据，传递分页、排序参数
  const response = await myService.getTableData(event.pageIndex, event.pageSize, sortActive, sortDirection);
  // 直接赋值当前页数据
  this.dataSource.data = response.items;
  // 更新总条数（从接口返回值中取）
  this.totalRowCount = response.totalCount;
}

// 排序切换处理
async handleSortChange(event: Sort) {
  // 排序切换后重置到第一页
  this.paginator.pageIndex = 0;
  const response = await myService.getTableData(0, this.paginator.pageSize, event.active, event.direction);
  this.dataSource.data = response.items;
  this.totalRowCount = response.totalCount;
}

// 通用数据加载方法
async loadTableData(pageIndex: number, pageSize: number, sortActive: string, sortDirection: string) {
  const response = await myService.getTableData(pageIndex, pageSize, sortActive, sortDirection);
  this.dataSource.data = response.items;
  this.totalRowCount = response.totalCount;
}

关键注意点 #

• 不要给MatTableDataSource设置paginator属性，完全由自己通过事件监听来控制分页逻辑。
• 每次分页/排序切换时，都要向服务端传递对应的参数（页码、页大小、排序字段、排序方向），获取精准的当前页数据。
• 分页器的length始终绑定你的totalRowCount，确保总条数显示正确。

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