Angular表格删除行后如何正确更新分页上下页链接？

核心问题分析 #

删除最后一页所有行后，当前页码未自动回退到有效范围，导致分页统计文本（如Showing 16 - 15 of 15）和上下页链接的启用/禁用状态异常。

具体修复步骤 #

1. 调整TypeScript中的删除逻辑与分页计算 #

在删除选中行的方法中，新增页码校验与回退逻辑，同时确保分页统计的索引计算正确：

// 组件核心变量示例
currentPage = 1;
itemsPerPage = 5;
totalItems = 0;
data: YourDataType[] = [];
selectedItems: YourDataType[] = [];

deleteSelectedRows() {
  // 执行删除：过滤掉选中行
  this.data = this.data.filter(item => !this.selectedItems.includes(item));
  // 更新总条目数
  this.totalItems = this.data.length;
  
  // 计算新的总页数
  const totalPages = this.totalItems > 0 ? Math.ceil(this.totalItems / this.itemsPerPage) : 1;
  
  // 当前页码超出有效范围时，自动回退到最后一页
  if (this.currentPage > totalPages) {
    this.currentPage = totalPages;
  }
  
  // 清空选中项
  this.selectedItems = [];
}

// 计算当前页起始索引
getStartIndex(): number {
  if (this.totalItems === 0) return 0;
  return (this.currentPage - 1) * this.itemsPerPage + 1;
}

// 计算当前页结束索引（不超过总条目数）
getEndIndex(): number {
  if (this.totalItems === 0) return 0;
  const calculatedEnd = this.currentPage * this.itemsPerPage;
  return calculatedEnd > this.totalItems ? this.totalItems : calculatedEnd;
}

// 上一页跳转
goToPrevPage() {
  if (this.currentPage > 1) {
    this.currentPage--;
  }
}

// 下一页跳转
goToNextPage() {
  const totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
  if (this.currentPage < totalPages) {
    this.currentPage++;
  }
}

2. 更新HTML模板中的分页显示与链接状态 #

修改分页信息文本和上下页链接的禁用逻辑，确保显示内容和交互状态正确：

<!-- 分页信息展示 -->
<div class="pagination-info">
  {{ totalItems === 0 ? 'No items found' : `Showing ${getStartIndex()} - ${getEndIndex()} of ${totalItems}` }}
</div>

<!-- 上下页操作链接 -->
<div class="pagination-controls">
  <a 
    href="javascript:void(0)" 
    (click)="goToPrevPage()"
    [class.disabled]="currentPage === 1 || totalItems === 0"
  >
    Prev
  </a>
  <a 
    href="javascript:void(0)" 
    (click)="goToNextPage()"
    [class.disabled]="currentPage === Math.ceil(totalItems / itemsPerPage) || totalItems === 0"
  >
    Next
  </a>
</div>

3. 补充禁用状态样式（可选） #

为禁用状态的链接添加样式，提升用户感知：

.pagination-controls a.disabled {
  color: #ccc;
  cursor: not-allowed;
  text-decoration: none;
}

关键逻辑说明 #

• 页码回退：删除行后重新计算总页数，若当前页码超过总页数，自动将页码设置为新的总页数，避免无效页码。
• 索引修正：确保结束索引不会超过总条目数，彻底解决16 - 15这类矛盾的显示问题。
• 动态禁用：根据当前页码和总条目数，实时控制上下页链接的启用/禁用状态，防止无效跳转。

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