Angular服务端分页场景下如何获取Datatable跨全页动态计数

问题本质 #

你当前的实现仅基于当前页加载的persons数组做选中状态统计，服务端分页场景下切换分页时会刷新当前页的数据源，前一页的选中状态没有全局存储，因此切换分页后会丢失之前的选中记录，仅能统计当前页选中项。

实现步骤 #

• 组件内新增全局存储结构保存所有跨页选中项的ID，推荐使用Set类型天然实现ID去重：

// 组件成员变量，存储所有跨页选中的记录ID
selectedIdSet = new Set<number>();

• 监听单条记录的选中切换事件，同步更新selectedIdSet：

onItemCheckChange(item: Person, isChecked: boolean) {
  if (isChecked) {
    this.selectedIdSet.add(item.id);
  } else {
    this.selectedIdSet.delete(item.id);
  }
  // 选中状态变更后按需触发统计逻辑更新
}

• 分页切换、当前页数据加载完成后，回显当前页的选中状态：

// 当前页数据加载完成的回调逻辑
onPageDataLoaded(pagePersons: Person[]) {
  this.persons = pagePersons.map(p => {
    // 从全局选中集合里匹配当前页记录的选中状态
    p.checked = this.selectedIdSet.has(p.id);
    return p;
  });
}

• 替换原有统计逻辑，直接从全局选中集合取数计算：

const totalAmount = this.selectedIdSet.size
  ? Array.from(this.selectedIdSet).reduce((sum, current) => sum + current, 0)
  : 0;
return totalAmount.toLocaleString();

拓展提示 #

如果需要支持当前页全选功能，只需要在全选触发时：

• 全选选中：遍历当前页所有记录ID，全部加入selectedIdSet
• 全选取消：遍历当前页所有记录ID，全部从selectedIdSet中移除

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