如何实现显示“第X页/共多页”的MatPaginator并解决分页按钮禁用问题

核心思路 #

绕过MatPaginator基于length判断下一页状态的逻辑，通过后端返回数据量控制分页按钮状态，同时保留自定义的页码文本显示。

具体实现步骤 #

1. 自定义分页器国际化文本（保留原有逻辑）

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

export class CustomPaginatorIntl extends MatPaginatorIntl {
  getRangeLabel(page: number, pageSize: number, length: number): string {
    if (length === 0) {
      return "第 1 页，共 1 页";
    } else if (length === -1) {
      return `第 ${page + 1} 页，共 多页`;
    }
    const totalPages = Math.ceil(length / pageSize);
    return `第 ${page + 1} 页，共 ${totalPages} 页`;
  }
}

2. 组件内控制分页状态

import { Component, ViewChild, OnInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { YourApiService } from './your-api.service';

@Component({
  selector: 'app-data-list',
  templateUrl: './data-list.component.html',
  providers: [{ provide: MatPaginatorIntl, useClass: CustomPaginatorIntl }]
})
export class DataListComponent implements OnInit {
  @ViewChild(MatPaginator) paginator!: MatPaginator;
  totalItems: number = -1;
  hasMoreData: boolean = true; // 标记是否还有更多数据

  constructor(private apiService: YourApiService) {}

  ngOnInit() {
    this.fetchData(0, 10);
  }

  fetchData(pageIndex: number, pageSize: number) {
    this.apiService.getData(pageIndex, pageSize).subscribe(res => {
      // 处理返回的数据
      if (res.count === -1) {
        this.totalItems = -1;
        // 若返回数据量等于每页大小，说明可能还有下一页；否则无更多数据
        this.hasMoreData = res.data.length === pageSize;
      } else {
        this.totalItems = res.count;
        this.hasMoreData = (pageIndex + 1) * pageSize < this.totalItems;
      }

      // 动态设置length：当count=-1时，设为当前页+2的总数据量，让分页器默认认为还有下一页
      this.paginator.length = this.totalItems === -1 ? (pageIndex + 2) * pageSize : this.totalItems;
      
      // 手动控制下一页按钮状态
      setTimeout(() => {
        if (this.paginator._nextPageButton) {
          this.paginator._nextPageButton.disabled = !this.hasMoreData;
        }
      });
    });
  }

  onPageChange(event: any) {
    // 只有当还有更多数据时，才发起下一页请求
    if (this.hasMoreData) {
      this.fetchData(event.pageIndex, event.pageSize);
    }
  }
}

3. 模板代码

<mat-paginator 
  [length]="totalItems"
  [pageSize]="10"
  [pageSizeOptions]="[5, 10, 20]"
  (page)="onPageChange($event)">
</mat-paginator>

方案优势 #

• 避免了用极大值模拟总数据量的 hack 写法，逻辑更清晰
• 通过后端返回数据量精准控制下一页按钮状态，符合实际业务场景
• 保留了自定义的“Page X of many”文本显示逻辑

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