Angular DataTables无法跨页选中记录，切换页后选中项不累积如何处理

问题根源 #

现有实现完全依赖DOM上的复选框选中状态做存储和统计，而DataTables的分页机制是每次切换分页时，直接销毁上一页的所有DOM节点、替换为当前页的渲染节点。所以每次翻页后，上一页的DOM选中元素根本不存在于当前文档树中，统计结果自然只剩当前页的勾选值。
另外原checkboxCheckCount方法的逻辑也存在缺陷：遍历DOM选中元素的循环内，并未读取每个复选框对应的业务数据值，反而直接使用方法入参info.index做累加，逻辑和遍历操作完全脱节。

核心解决逻辑 #

将选中状态与DOM渲染完全解耦，不依赖DOM节点的选中态做持久化存储，所有选中的业务记录统一存在组件内存的独立集合中，不受分页时的DOM重绘影响。

具体落地步骤 #

• 在组件类中定义独立的选中记录存储集合，仅存储每条业务数据的唯一主键、关联的统计字段（如需要累加的index值），禁止存储DOM元素引用——避免分页时DOM销毁导致的引用失效
• 表格行内的复选框替换为Angular原生绑定，不要用jQuery做全局事件监听：
  • 通过[checked]属性判断当前行是否存在于选中集合中，控制复选框的初始显示状态，保证翻页返回时，之前选中的行能正确显示打勾状态
  • 绑定复选框的change事件，点击时实时更新内存中的选中集合：勾选时按唯一主键去重后将记录加入集合，取消勾选时将对应记录从集合中移除
• 重写计数方法，不再遍历DOM的选中元素，直接遍历内存中的选中集合计算累计值
• 配套适配全选逻辑：当前页的全选复选框，需根据当前页所有行是否已全部在选中集合中判断自身选中态；点击全选时，批量将当前页的所有记录加入/移出选中集合，不要直接操作DOM的勾选属性
• 注意不要在分页切换的回调逻辑里清空选中集合，这是跨页选中丢失的常见触发点

核心代码修正参考 #

首先在组件类中定义全局选中存储：

// 独立于DOM的选中记录集合
selectedRecords: Array<{ id: number, index: string }> = [];
// 表格业务数据源
tableList: Array<{ id: number, index: string }> = [];

复选框的点击处理方法：

onRowCheckboxChange(record: { id: number, index: string }, isChecked: boolean): void {
  if (isChecked) {
    // 按唯一主键去重，避免重复添加
    const isExist = this.selectedRecords.some(item => item.id === record.id);
    if (!isExist) {
      this.selectedRecords.push(record);
    }
  } else {
    // 取消勾选时移除对应记录
    this.selectedRecords = this.selectedRecords.filter(item => item.id !== record.id);
  }
  // 触发金额累计计算
  this.calcCheckTotal();
}

替换原checkboxCheckCount的计数逻辑：

calcCheckTotal(): void {
  let totalAmount = 0;
  // 直接从内存集合遍历计算，完全不依赖DOM状态
  this.selectedRecords.forEach(record => {
    if (record.index !== "") {
      totalAmount += parseFloat(record.index);
    }
  });
  document.querySelector("#idCheckBoxLabel").textContent = totalAmount.toString();
}

表格模板内的复选框绑定示例：

<!-- 表格行内的复选框 -->
<input 
  type="checkbox"
  [checked]="selectedRecords.some(item => item.id === row.id)"
  (change)="onRowCheckboxChange(row, $event.target.checked)"
>

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