如何从启用分页的PrimeNG Table组件获取当前页码？

核心方案：利用Table的分页事件或组件实例获取页码 #

PrimeNG Table的分页器提供了两种可靠的方式获取当前页码，需要注意的是：PrimeNG内置页码从0开始计数，而Django的PageNumberPagination默认从1开始，所以必须做+1的转换才能适配后端。

方法一：通过onPageChange事件实时监听页码变化 #

每次分页切换时，onPageChange事件会触发并返回包含当前页码的事件对象，适合在页码变更时直接请求对应页的后端数据。

模板（table.html）修改：

<p-table
    [value]="rows"
    [paginator]="true"
    [rows]="10"
    (onPageChange)="handlePageChange($event)"
></p-table>

组件代码修改：

@Component({
    selector: 'app-table',
    templateUrl: 'table.html',
    standalone: true,
    imports: [TableModule, CommonModule],
    providers: [ApiService]
})
export class TablePaginatorBasicDemo {
    rows!: Row[];
    currentDjangoPage: number = 1; // 对应Django的起始页码

    constructor(private apiService: ApiService) {}

    ngOnInit() {
        // 初始化请求第一页数据
        this.fetchRows(this.currentDjangoPage);
    }

    handlePageChange(event: any) {
        // 转换PrimeNG的0起始页码为Django的1起始
        this.currentDjangoPage = event.page + 1;
        // 请求对应页码的后端数据
        this.fetchRows(this.currentDjangoPage);
    }

    fetchRows(page: number) {
        // 假设你的ApiService支持接收page参数
        this.apiService.getRows(page).subscribe((data) => {
            this.rows = data;
        });
    }
}

方法二：通过组件实例主动获取页码 #

如果需要在特定场景（比如按钮点击）主动获取当前页码，可以给Table添加模板引用变量，直接访问分页器的属性。

模板修改：

<p-table
    #dataTable
    [value]="rows"
    [paginator]="true"
    [rows]="10"
></p-table>
<button (click)="getCurrentPage(dataTable)">获取当前页码</button>

组件添加方法：

getCurrentPage(table: any) {
    // 从Table实例的分页器中读取当前页码，再转换为Django格式
    const primeNgPage = table.paginator.page;
    const djangoPage = primeNgPage + 1;
    console.log('当前适配Django的页码：', djangoPage);
}

关键注意点 #

• 务必处理页码计数规则差异：PrimeNG页码从0开始，Django默认从1开始，遗漏转换会导致请求错误页码的数据。
• 如果后端需要每页条数参数，可以通过事件对象的event.rows属性获取当前设置的每页条数，一起传给后端接口。

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