如何为特定页面设置自定义分页并统一页码显示？

需求：第1页显示currntWeekAb()返回的自定义记录数，其余所有页面固定显示50条记录。
当前问题：切换页面时，分页控件显示的总页码数会变化。比如员工总数210、currntWeekAb()返回10时，第1页显示21页（210/10），其他页面显示5页（210/50），不符合所有页面显示相同页码数的要求。

现有代码 #

HTML代码 #

<table #filteredTable mat-table class="mat-elevation-z8" id="table"> 
  <thead>
    <tr>
          <!-- TABLE HEADERs -->       
    </tr>
  </thead>
  <tbody *ngIf="employee?.length > 0">  
    <tr *ngFor="let item of employee | filter: SearchBtn | paginate: config; let i = index">
      
          <!-- TABLE RECORDS  -->   

    </tr> 
  </tbody> 
</table>

<!-- pagination controls -->
<div class="pagination-container">
  <pagination-controls (pageChange)="onPageChange($event)" [id]="config.id" [directionLinks]="true"></pagination-controls>
</div>

TypeScript代码 #

export class TableComponent {
  // Array of data to be paginated
  employee: any[] = [];
  
  // Pagination settings
  config: PaginationInstance = {
    id: 'custom',
    itemsPerPage: 50,
    currentPage: 1,
    totalItems: this.absences.length
  };

  ngOnInit(): void {
     this.retrieveEmp();
  }
  
  // Update the current page when it changes
  onPageChange(pageNumber: number) {
    this.config.currentPage = pageNumber;
    this.config.itemsPerPage = this.config.currentPage === 1 ? this.currntWeekAb() : 50;
  }

 currntWeekAb(){ 
  const filteredAb = this.employee.filter(ab => {
    const startDate = moment(ab['ab_to']).format('YYYY-MM-DDTHH:mm');
    return startDate >= this.filFrom && startDate <= this.filTo || ab.ab_flag == true;
  });
  const totalLength = filteredAb.length;
  console.log(totalLength);
  return totalLength;
 }

 retrieveEmp():void{
    this.employeeService.getAll()
    .subscribe(
    info => {
      this.employee = info;
      this.config['itemsPerPage'] = this.currntWeekAb();
    },
    error => {
      console.log(error);
    });
 }
}

核心思路：固定总页码的计算逻辑，手动处理分页数据，避免itemsPerPage变化导致分页控件的总页数波动。

步骤1：新增变量存储过滤后的数据 #

在组件中添加变量，用于存储经过SearchBtn过滤后的完整数据，方便后续分页计算：

filteredEmployees: any[] = []; // 存储过滤后的所有员工数据
firstPageSize: number = 0; // 第1页的记录数
totalFilteredCount: number = 0; // 过滤后的总记录数

步骤2：更新过滤数据与分页参数 #

修改retrieveEmp方法，同时在搜索条件变化时（比如SearchBtn变动时）也要执行以下逻辑：

retrieveEmp():void{
    this.employeeService.getAll()
    .subscribe(
    info => {
      this.employee = info;
      this.updateFilteredData(); // 调用更新过滤数据的方法
    },
    error => {
      console.log(error);
    });
}

// 新增方法：更新过滤数据与分页参数
updateFilteredData(): void {
  // 实现和filter: SearchBtn相同的过滤逻辑
  this.filteredEmployees = this.employee.filter(item => {
    // 替换成你实际的SearchBtn过滤规则，例如：
    return item.name.includes(this.SearchBtn);
  });
  
  this.totalFilteredCount = this.filteredEmployees.length;
  this.firstPageSize = this.currntWeekAb();
  
  // 计算总页数：第1页 + 剩余数据按50条/页计算的页数
  const remainingCount = Math.max(0, this.totalFilteredCount - this.firstPageSize);
  const totalPages = 1 + Math.ceil(remainingCount / 50);
  
  // 配置分页控件的总条目数，确保分页控件显示正确的总页数
  this.config.totalItems = this.firstPageSize + (totalPages - 1) * 50;
  this.config.currentPage = 1; // 重置到第1页
}

步骤3：自定义分页数据切片 #

新增方法，根据当前页码返回对应的数据：

getCurrentPageData(): any[] {
  if (this.config.currentPage === 1) {
    // 第1页取前firstPageSize条
    return this.filteredEmployees.slice(0, this.firstPageSize);
  } else {
    // 其他页：跳过第1页的数量，然后取50条
    const startIndex = this.firstPageSize + (this.config.currentPage - 2) * 50;
    return this.filteredEmployees.slice(startIndex, startIndex + 50);
  }
}

步骤4：修改HTML模板 #

移除paginate管道，改用自定义的分页数据：

<tbody *ngIf="filteredEmployees?.length > 0">  
  <tr *ngFor="let item of getCurrentPageData(); let i = index">
        <!-- TABLE RECORDS  -->   
  </tr> 
</tbody> 

步骤5：修改分页切换逻辑 #

更新onPageChange方法，不再修改itemsPerPage，只需更新当前页码：

onPageChange(pageNumber: number) {
  this.config.currentPage = pageNumber;
}

补充：处理搜索条件变化 #

当SearchBtn变化时，需要调用updateFilteredData()方法，更新过滤数据和分页参数：

// 假设SearchBtn是双向绑定的搜索变量
@Input() SearchBtn: string = '';

// 监听搜索条件变化
ngOnChanges(changes: SimpleChanges): void {
  if (changes['SearchBtn']) {
    this.updateFilteredData();
  }
}

这样修改后，分页控件会始终显示正确的总页码数，第1页显示自定义条数，其余每页显示50条，且切换页面时页码总数保持一致。

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