jQuery数据表跨页面的行计数筛选

我有一个包含很多页面的巨大数据表，我必须计算具有特定值的行

如何计算所有页面的数量

例子

Html:

Fiddle:（）

提供分配给

数据表的完整数据集。使用这种方法，您可以循环遍历每一行并计算所需的数据

var count = 0;
$("#count10").click(function() {
  count = 0;
  var data = table
             .rows()
             .data();
  $(data).each(function(k, v) {
      var elem = $(v[0]).find(":input[name='Items[%INDEX_ITEM%].Item'][value='10']");
      elem.length ? count++ : 0;
  })
  alert(count);
});

$("#count20").click(function() {
  count = 0;
  var data = table
             .rows()
             .data();
  $(data).each(function(k, v) {
      var elem = $(v[0]).find(":input[name='Items[%INDEX_ITEM%].Item'][value='20']");
      elem.length ? count++ : 0;
  })
  alert(count);
});


一般来说，您可以为按钮编写一个常见的
单击事件
，并编写更高效的代码，如下所示：

按钮html将是

<button id="count10" data-count="10" class="count">Count 10</button>
<button id="count20" data-count="20" class="count">Count 20</button>



请注意，这可能不是最终的解决方案。从
表.rows（）.data（）
中获取所有数据后，还可以考虑其他一些方法来过滤数据

在您的示例中，您可以将datatable创建为一个变量，并使用它同时将行过滤到所有页面中

var tableItems = $("#tester").DataTable(
{
    lengthMenu: [[25, 50, 100, 250, -1], [25, 50, 100, 250, "All"]], 
    pageLength: 3,
    pagingType: "full_numbers", 
    scrollY: "400px", 
    scrollCollapse: true
});

并获取总计数：

$("#count10").click(function(){ alert(tableItems.$(":input[name='Items[%INDEX_ITEM%].Item'][value='10']").length) });

小提琴：（）

var count = 0;
$(".count").click(function() {
    count = 0;
    var filt = $(this).attr("data-count");
    var data = table
               .rows()
               .data();
    $(data).each(function(k, v) {
       var elem = $(v[0]).find(":input[name='Items[%INDEX_ITEM%].Item'][value='" + filt + "']");
       elem.length ? count++ : 0;
    })
    alert(count);
});

var tableItems = $("#tester").DataTable(
{
    lengthMenu: [[25, 50, 100, 250, -1], [25, 50, 100, 250, "All"]], 
    pageLength: 3,
    pagingType: "full_numbers", 
    scrollY: "400px", 
    scrollCollapse: true
});

$("#count10").click(function(){ alert(tableItems.$(":input[name='Items[%INDEX_ITEM%].Item'][value='10']").length) });