无法选择 Angular DataTables 中所有页面的记录答案

【问题标题】：Unable to select the records across all pages in Angular DataTables无法选择 Angular DataTables 中所有页面的记录
【发布时间】：2021-04-02 09:20:20
【问题描述】：

尝试选中所有页面的复选框，但如果我们更改页面，则所选记录不会附加到先前所选记录。它只需要第二页记录。谁能建议我如何处理以选择所有页面中的记录。

 checkboxCheckCount(info: any): void {
    var totalamount = 0;
    $("#firstTable input:checked").each(function() {
      if (info.index != "") {
        totalamount += parseFloat(info.index);
      } else {
        totalamount = totalamount;
      }
    });
    $("#idCheckBoxLabel").text(totalamount);
  }

Working Demo

【问题讨论】：

标签： jquery angular datatables angular-datatables

【解决方案1】：

首先，添加 ChangeDetectorRef 依赖到你的组件。

constructor(private http: HttpClient, private cdRef: ChangeDetectorRef) {}

然后添加checked属性到所有persons。

this.persons = response.data;
this.persons.forEach(f => (f.checked = false));

然后实现你的checkuncheckall方法：

checkuncheckall() {
    const totalChecked = this.persons.filter(f => f.checked).length;
    const target = totalChecked !== this.persons.length;
    this.persons.forEach(f => (f.checked = target));
    this.cdRef.detectChanges();
}

您的rowCallback 不再需要。

已更改 checkboxCheckCount 函数将始终动态更新以获取总金额。

get checkboxCheckCount() {
    const selectedPersons = this.persons.filter(f => f.checked).map(m => m.id);
    const totalAmount = selectedPersons.length
      ? selectedPersons.reduce((sum, current) => sum + current)
      : 0;
    return totalAmount;
  }

在 HTML 中：

设置计数：

<div>Count::<span>{{ checkboxCheckCount }}</span><div>

切换单个行复选框：

<td><input type="checkbox" class="checkboxCls" [value]="person.checked" [checked]="person.checked" name="id" (change)="person.checked = !person.checked"></td>

在StackBlitz查看工作演示。

【讨论】：

非常感谢您的回答。它工作正常:)
HI Zunayed Shahriar，有没有像我们可以只选择当前页面记录而不是所有页面的解决方案，如果有的话，请给我建议。