NgPrime Turbo Table编辑保存后刷新数据，如何设置当前页码？

要解决保存数据后重新加载表格却丢失当前页码的问题，核心是提前保存分页状态，数据刷新后恢复这些状态。以下是具体实现步骤：

1. 保存当前分页状态 #

首先在组件中定义变量存储分页的关键参数（起始索引first和每页行数rows），然后在onPage事件中更新这些变量：

import { Component } from '@angular/core';
import { PageEvent } from 'primeng/api';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 存储分页状态
  currentFirst: number = 0;
  currentRows: number = 10; // 替换成你的默认每页行数
  yourDataList: any[] = [];

  // 处理分页事件
  paginate(event: PageEvent) {
    this.currentFirst = event.first;
    this.currentRows = event.rows;
    // 如果你需要页码，也可以计算：const currentPage = event.first / event.rows + 1;
  }
}

2. 将分页状态绑定到表格 #

在模板的<p-table>标签中，通过[first]和[rows]属性绑定我们保存的变量，这样表格的分页就会受这些变量控制：

<p-table
  [value]="yourDataList"
  paginator="true"
  [rows]="currentRows"
  [first]="currentFirst"
  (onPage)="paginate($event)"
  <!-- 其他必要属性，比如totalRecords等 -->
>
  <!-- 你的列定义 -->
  <ng-template pTemplate="header">
    <!-- 表头内容 -->
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <!-- 表体内容 -->
  </ng-template>
</p-table>

3. 数据刷新后恢复分页 #

当你保存数据并重新加载表格数据时，确保currentFirst和currentRows的值保持不变。在数据加载完成后，表格会自动根据这两个参数回到之前的页码：

saveData(item: any) {
  // 调用保存接口
  this.yourService.saveItem(item).subscribe({
    next: () => {
      // 重新加载数据
      this.loadData();
    },
    error: (err) => {
      // 错误处理
    }
  });
}

loadData() {
  this.yourService.getData().subscribe({
    next: (data) => {
      this.yourDataList = data;
      // 这里不需要额外修改currentFirst/currentRows，因为绑定已经生效
      // 如果遇到数据总量变化导致页码超出的情况，可以加个判断：
      // const maxFirst = (this.totalRecords - 1) - (this.totalRecords % this.currentRows);
      // this.currentFirst = Math.min(this.currentFirst, maxFirst);
    },
    error: (err) => {
      // 错误处理
    }
  });
}

备选方案：通过ViewChild直接控制表格 #

如果你更倾向于直接操作表格实例，可以通过ViewChild获取表格对象，然后在数据刷新后手动设置页码：

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

@Component({
  // ...组件元数据
})
export class YourComponent {
  @ViewChild('dt') dt: Table;

  // ...其他变量和方法

  loadData() {
    this.yourService.getData().subscribe({
      next: (data) => {
        this.yourDataList = data;
        // 恢复之前的页码
        this.dt.first = this.currentFirst;
      }
    });
  }
}

对应的模板需要给表格添加模板引用变量：

<p-table #dt ...></p-table>

这样就能确保每次保存数据刷新后，表格都停留在用户之前浏览的页码上了。

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