无法 select Angular DataTables 中所有页面的记录

Question

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

 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

Answer 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 查看 工作演示 。

无法 select Angular DataTables 中所有页面的记录

Unable to select the records across all pages in Angular DataTables

jquery

datatables

angular-datatables

angular