使用数据表选择多页记录

问题描述

有这样的要求，我需要选择不同页面的数据表中的记录，例如第一页 2 记录，第二页 3 记录...我只能选择第一页，如果我更改为第二页并选择记录，以前选定的记录正在重置和更新新数据。我尝试了下面的代码，如果有任何问题，请帮助..

  $("#firstTable input:checked").each(function() {
    if (info.index != "") {
      creditAmount += parseInt($(this).prop("value"));
    }
  });
  $("#idCheckBoxLabel").text(creditAmount);
}

Stackblitz

解决方法

要处理 DataTable 中的所有行，考虑到分页，您不能使用 DOM 和 jQuery 选择器。 DOM 中唯一可见的值将是当前显示页面中的值 - 如您所见。

相反，您必须通过 DataTables API 访问表的数据。这将使您可以访问存储在 DataTable 中的整个数据集，无论它是否在当前页面上（而且，它可以考虑过滤）。

这是我的“最小可重现示例”演示表，使用您的数据：

$(document).ready(function() {

  var table = $('#example').DataTable( {
    ajax: {
      url: "https://raw.githubusercontent.com/l-lin/angular-datatables/master/demo/src/data/data.json",},columns: [
      { title: "",defaultContent: '<input type="checkbox" />' },{ title: "Amount",data: "id" },{ title: "First Name",data: "firstName" },{ title: "Last Name",data: "lastName" }
    ]
  } );

} );

然后我定义一个函数如下：

function doSum() {
  var table = $('#example').DataTable();
  var checkboxNodes = table.column(0).nodes();
  var amountData = table.column(1).data();
  
  var sum = 0;
    
  for (var i = 0; i < checkboxNodes.length; i++) {
    if( $(checkboxNodes[i]).find("input").is(':checked') ) {
      sum += amountData[i];
    }
  }
  
  console.log(sum);
}

此功能附加到一个按钮上，用于测试：

<button onclick="doSum()">Test</button>

这里的关键部分是 DataTables API 调用：

table.column(0).nodes()

和

table.column(1).data()

使用每个节点，然后我可以使用 jQuery 选择器访问每个复选框的状态 - 并获得总和的相关金额。

angular-datatables datatables jquery