jQuery dataTables跨页

Question

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

我如何计算所有页面？

示例......

HTML：

<tr class="item_line  odd" role="row">
  <td>
    <i class="fa fa-chevron-down hover-blue" onclick="Toogle(this)"></i>
    <label class="right"><input name="Items[%INDEX_ITEM%].Item" class="input-light input-xs width50" style="width: 50px !important;" onkeypress="return onlyInt(event);" type="text" value="10"></label>
  </td>
  <td><span>MM0123455</span></td>
  <td>COMPOSTO 10KG</td>
</tr>

jQuery的：

// ....
if ($(":input[name='Items[%INDEX_ITEM%].Item'][value='" + item +"']").length == 0) {
    // ....
} else {
    // ....
}
// ....

小提琴：（https://jsfiddle.net/na406ffv）

Answer 1

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

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

小提琴：（https://jsfiddle.net/na406ffv/1/）

Answer 2

table.rows().data() 为您提供分配给datatable的完整数据集。使用它，您可以遍历每一行并计算所需的数据。

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

<强> Updated Fiddle

为了概括，你可以为你的按钮编写一个通用的click event，并编写更有效的代码，如下所示：

按钮html将是

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

点击活动

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

<强> Sample Fiddle

  

请注意，这可能不是最终的解决方案。从table.rows().data()获取所有数据后，您还可以考虑使用其他方式过滤数据。