PrimeNG Paginator 删除当前页全部数据后如何自动跳转回上一页

你使用的是PrimeNG分页组件，按以下步骤修改即可实现需求：

• 首先给p-paginator新增first属性绑定，该属性用于控制当前页第一条数据的索引，修改后的组件代码如下：

<p-paginator [showCurrentPageReport]="true" [rows]="ten" [totalRecords]="lengthDoc" [first]="paginatorFirst" (onPageChange)="transitionPage($event)"></p-paginator>

• 在业务组件代码中声明对应变量，并在翻页回调里同步first值：

// 声明变量，默认第一页第一条数据的索引为0
paginatorFirst = 0;
// 原有翻页方法
transitionPage(event) {
  // 同步分页器的first值
  this.paginatorFirst = event.first;
  // 保留原有翻页逻辑
}

• 在删除文档的成功回调中新增页码校验，删除完成更新lengthDoc后执行以下判断逻辑：

// 删除接口请求成功后，先更新总记录数
this.lengthDoc = 新的总文档数量;
// 计算新的总页数
const newTotalPage = this.lengthDoc ? Math.ceil(this.lengthDoc / this.ten) : 0;
// 计算当前所在页码
const currentPage = Math.ceil(this.paginatorFirst / this.ten) + 1;

// 当前页码大于新总页数，说明当前页已无有效数据
if (currentPage > newTotalPage) {
  if (newTotalPage > 0) {
    // 按需求直接跳转到第一页，赋值为0即可
    this.paginatorFirst = 0;
    // 如果需要跳转到新的最后一页，可替换为以下写法：
    // this.paginatorFirst = (newTotalPage - 1) * this.ten;
  } else {
    // 无数据时重置到初始位置
    this.paginatorFirst = 0;
  }
}

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