PrimeNg 15.2.0 p-table分页器rowsPerPageOptions预选失效及onPage事件异常求助

问题复现场景 #

• 页面初始化时p-table无数据，分页器下拉选项可见
• 先选择分页器的行数选项，再点击导入数据加载表格内容，此时选中的行数不会应用到表格
• 无数据状态下，(onPage)="paginate($event)"事件完全不触发，仅在表格有数据时正常执行
• 该功能在PrimeNG旧版本可正常工作

解决方案 #

1. 手动维护分页参数，数据加载时同步配置 #

在组件中自行维护rows和first等分页变量，不依赖p-table内部状态：

// 组件类中定义分页变量
currentRows = 10; // 默认显示行数
currentFirst = 0;

// 手动监听分页器下拉变化（无数据时p-table原生事件不触发）
onRowsPerPageChange(event: any) {
  this.currentRows = event.value;
}

// 导入数据后同步分页配置
importData() {
  this.dataService.getData(this.filters).subscribe(res => {
    this.tableData = res;
    // 手动更新表格分页状态
    if (this.table) {
      this.table.rows = this.currentRows;
      this.table.first = this.currentFirst;
      this.table.reset(); // 触发表格重新渲染
    }
  });
}

模板修改：

<p-table #table [value]="tableData" [rows]="currentRows" [first]="currentFirst"
         [rowsPerPageOptions]="[10,20,50]" (onPage)="paginate($event)">
  <!-- 自定义分页器左侧下拉，绑定手动监听事件 -->
  <ng-template pTemplate="paginatorleft">
    <p-dropdown [options]="rowsPerPageOptions" [(ngModel)]="currentRows" 
                (onChange)="onRowsPerPageChange($event)"></p-dropdown>
  </ng-template>
  <!-- 表格列定义 -->
</p-table>

2. 通过ViewChild获取Table实例，强制更新分页状态 #

如果不想自定义分页器，可在数据加载后手动将选中的行数赋值给Table组件：

import { ViewChild } from '@angular/core';
import { Table } from 'primeng/table';

@Component({...})
export class YourComponent {
  @ViewChild('table') table!: Table;
  selectedRows = 10; // 初始默认值

  // 监听分页器选择变化
  onRowsSelect(event: any) {
    this.selectedRows = event.value;
    // 已有数据时直接同步到表格
    if (this.tableData?.length) {
      this.table.rows = this.selectedRows;
      this.table.reset();
    }
  }

  importData() {
    this.dataService.getData().subscribe(res => {
      this.tableData = res;
      // 数据加载后应用之前选中的行数
      this.table.rows = this.selectedRows;
      this.table.first = 0; // 重置到第一页
      this.table.reset();
    });
  }
}

3. 临时降级或提交官方issue #

如果上述修复无效，可临时降级到PrimeNG 15.x早期版本（如15.0.0），或在PrimeNG GitHub仓库提交带复现案例的issue，推动官方修复该版本bug。

原因分析 #

PrimeNG 15.2.0的p-table在无数据状态下，分页器的用户选择状态未被正确缓存；数据加载后，表格未读取之前的选中值，而是沿用默认配置。同时无数据时onPage事件的触发逻辑被修改，导致无法监听分页器操作。

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