jQuery dataTables row count filtering across pages

Question

I have a huge datatable with a lot of pages, and I have to count the rows that have a specific value.

How can I count across all pages?

Examples ...

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 {
    // ....
}
// ....

Fiddle: (https://jsfiddle.net/na406ffv)

Erotides Araujo Dantas Junior · Accepted Answer · 2017-04-10 14:01:33Z

2

In your example, you can create the datatable into a variable and use it to filter rows into all pages at same time.

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

And get the total count:

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

Fiddle: (https://jsfiddle.net/na406ffv/1/)

edited Apr 10, 2017 at 14:01

answered Apr 10, 2017 at 13:42

Erotides Araujo Dantas Junior

363 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guruprasad J Rao · Accepted Answer · 2017-04-08 18:32:53Z

table.rows().data() gives you complete data set assigned to your datatable. Using this, you can just loop through each row and count for required data.

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

To generalize, you can write a common click event for you buttons and write more efficient code as below:

button html would be

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

Click event

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

Please note that this might not be an ultimate solution. You can also think of some other ways to filter your data once you get all data from table.rows().data().

Collectives™ on Stack Overflow

jQuery dataTables row count filtering across pages

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related