如何在使用过滤器后重置Angular Material data-table分页

问题根因 #

• 你当前的分页逻辑是服务端分页，每次只从后端拉取当前页的10条数据，但过滤用的是MatTableDataSource自带的前端本地过滤，只会在当前已加载的10条数据里做筛选，过滤后数据量不足一页时分页器自然不会显示下一页选项，同时过滤逻辑没有联动到后端请求，拉取符合过滤条件的全量分页数据。
• HTML中mat-paginator的[length]属性绑定了totalRows变量，但你在接口回调里把后端返回的总条数赋值给了totalElements，totalRows始终为初始值0，分页器计算总页数错误。

修复方案（二选一即可） #

方案1：全前端逻辑（适合数据量小，总数据不超过1000条的场景） #

不需要调用后端分页接口，一次性拉取所有数据，交给MatTableDataSource自带的分页、过滤、排序能力处理：

1. 修改Service层的getAll方法，拉取全量数据：

getAll(): Observable<Movie[]> { 
  return this.http.get<Movie[]>(API_URLS.MOVIES_URL, { params: { size: '1000' } }); 
}

2. 修改Component层逻辑：

ngOnInit(): void {
  this.service.getAll().subscribe(data => {
    this.dataSource.data = data;
    // 直接用自带的分页排序，不需要自己维护currentPage、totalElements等变量
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  })
}
// 删除loadData、pageChanged方法，doFilter逻辑保留即可

3. 修改HTML的paginator配置，删除自定义的绑定和事件：

<mat-paginator #paginator [pageSizeOptions]="[10, 25, 100]"></mat-paginator>

方案2：全服务端逻辑（适合数据量大的场景） #

把过滤、排序参数都传给后端，由后端返回对应过滤条件下的分页数据：

1. 修改Service层的getAll方法，新增过滤、排序参数：

getAll(page: number, size: number, filter: string, sortField: string, sortOrder: string): Observable<any> { 
  return this.http.get<any>(API_URLS.MOVIES_URL, { 
    params: { page, size, filter, sortField, sortOrder } 
  }); 
}

2. 修改Component层逻辑：

ngAfterViewInit() {
  // 排序变化时重新拉取数据
  this.sort.sortChange.subscribe(() => {
    this.currentPage = 0;
    this.loadData();
  })
}
loadData() {
  this.isLoading = true;
  // 传入过滤值、排序字段和排序方向
  this.service.getAll(
    this.currentPage, 
    this.pageSize, 
    this.filter.value?.trim().toLocaleLowerCase() || '',
    this.sort.active || '',
    this.sort.direction || ''
  ).subscribe({
    next: cardPage => {
      this.dataSource.data = cardPage.content;
      this.totalElements = cardPage.totalElements;
      this.totalRows = cardPage.totalElements; // 给绑定的变量赋值
      setTimeout(() => {
        this.paginator.pageIndex = this.currentPage;
        this.paginator.length = this.totalElements;
      });
      this.isLoading = false;
    },
    error: error => {
      console.log(error);
      this.isLoading = false;
    }
  });
}
public doFilter() {
  // 过滤时重置页码到第一页，重新拉取数据
  this.currentPage = 0;
  this.loadData();
}

3. 修改HTML的paginator的length绑定：

<mat-paginator #paginator [length]="totalElements" [pageIndex]="currentPage" [pageSize]="pageSize" [pageSizeOptions]="[10, 25, 100]" (page)="pageChanged($event)"></mat-paginator>

4. 同步修改后端接口，支持接收filter、sortField、sortOrder参数，返回对应过滤条件下的分页结果即可。

内容的提问来源于stack exchange，提问作者Med Aziz CHETOUI