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

Question

尝试在所有页面中选择复选框，但如果更改页面，所选记录将不会追加到先前所选记录。它只需要第二页记录。有没有人可以建议我如何处理选择所有页面的记录。

 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);
  }

工作演示

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的工作演示。