jquery tablesorter filter - how to count the filtered rows

Question

I'm using jQuery plug-in jquery-tablesorter-filter. It works great. I have problem when I want to count how many rows after the table is filtered.

$("#tblContainer").tablesorter({
    debug: false,
    sortList: [
        [0, 0]
    ],
    widgets: ['zebra']

}).tablesorterFilter({
    filterContainer: $("#filterBox"),
    filterColumns: [1, 2],
    filterCaseSensitive: false
});

Here's the code to count the filtered rows (rows that are currently on the screen). But it doesn't give me the correct result. It gave the last count of filtered rows instead of the current counts. It always give result with one key stroke behind.

$("#filterBox").keyup(function () {

    var textLength = $("#filterBox").val().length;

    if (textLength > 0) {

        var rowCount = $("#tblContainer tr:visible").length;

        $("#countCourseRow").html(" found " + rowCount);
    } else {
        $("#countCourseRow").html("");
    }

});

Elmaleh

were you able to solve this? – Trinitrophenol

Answer 1

What's wrong with the built in events: http://mottie.github.com/tablesorter/docs/example-option-show-processing.html

The example will look like this:

$("#tblContainer").tablesorter({
debug: false,
sortList: [
  [0, 0]
],
widgets: ['zebra']
}).bind('filterEnd', function() {
  $("#countCourseRow").html("");
  $("#countCourseRow").html("found " + $('#myTable tr:visible').length);
});

Mildamilde

Ah, If you have headers you need to add -2 just after length. – Mildamilde

I added the above bind with a check on rows visible. It updates a new header I added before the columns. .bind('filterEnd', function() { /**** Update row count when filter is applied. ****/ $('.tablesorter-header-inner span').html($('tbody tr:visible').length); }); – Melodramatic

@FredrikErlandsson Your link show the filter but I dont see the row count there, And that solution will works with pager too? – Trunkfish

For the header issue, instead of subtracting 2 (or 1, depending on header), you can use $('#myTable tbody tr:visible').length. – Mauramauralia

Answer 2

Just edit you tablesorterFilter js file to add a callback function:

add this on line 147 just before return table; that is closing of doFilter()

if (jQuery.isFunction(filter.callback)){
      filter.callback();
}

then change this:

     this.defaults = {
        filterContainer: '#filter-box',
        filterClearContainer: '#filter-clear-button',
        filterColumns: null,
        filterCaseSensitive: false,
        filterWaitTime: 500,
        filterFunction: has_words,
        columns: []
      };

to

      this.defaults = {
        filterContainer: '#filter-box',
        filterClearContainer: '#filter-clear-button',
        filterColumns: null,
        filterCaseSensitive: false,
        filterWaitTime: 500,
        filterFunction: has_words,
        columns: [],
        callback: function(){}
      };

Now you just have to define your callback function here

}).tablesorterFilter({
    filterContainer: $("#filterBox"),
    filterColumns: [1, 2],
    filterCaseSensitive: false,
    callback: function(){
         var rowCount = $("#tblContainer tr:visible").length;
         $("#countCourseRow").html(" found " + rowCount);
    }
});

this should do it for you :)

Purnell

I tried this but it doesn't work. I modified the tbsorter-filter.js and added the callback option and tried it from the page like this. callback: function(){ alert("Yes"); } – Elmaleh

can you upload it somewhere so I can take a look at it? may be create a jsfiddle... – Purnell

Sally could you check the jsfiddle. Isnt loading now – Trunkfish

Answer 3

You might have a logical error in your script otherwise the simplest way is to get the length of visible rows.

 $('#table_id tr:visible').length

Steve

@JuanCarlosOropeza, try it. It should. – Steve

No its doesnt. have to go with this solution instead – Trunkfish

Answer 4

This worked for me:

jQuery('table').data("rowCount", jQuery('#table_id tbody tr:visible').length);

and then,

 var rowCount = jQuery('table').data("rowCount");

Underlayer

Answer 5

If wrote this re-usable jQuery function that applies the tablesorter and adds a line underneath each table displaying the total number of rows and the number of visible rows. It also adds a short help text at the top, linking to the filter syntax (which is actually quite rich and powerful).

props is the tablesorter properties to apply to the table specified in the jQuery selector selector. Add your required filtering options (and all other tablesorter options/preferences) in there.

Note that if you want to count the number of data items displayed in the table then counting the number of trs in table, as recommended by some other answers, won't give you the correct number. This will be an overcount --by 2 most commonly-- as it includes the table's original header row(s) if present, any footer row(s) and also the filter row that is dynamically added by tablesorter into the table header. Instead, count the number of trs in the table's tbody.

$ = jQuery

function sortTableFiltered( selector, props ) {
  let $table = $( selector );

  $table.before( '<div class="filterHelp" style="text-align:right; margin-bottom:-7px"><a href="https://mottie.github.io/tablesorter/docs/example-widget-filter.html" target="_blank">filter help</a></div>' );
  $table.after( '<div class="rowCount" style="margin-top:-12px; margin-bottom:1.5ex"><i><var class="visibleRows">x</var> of <var class="totalRows">y</var> rows visible</i></div>' );

  $table.tablesorter( props )
  .bind( 'filterEnd', function( e, filter ) { // update visible and total row count
     let $table = $( e.target );

     let $tbody = $table.find( 'tbody' );
     let totalRows   = $tbody.find( 'tr'         ).length;
     let visibleRows = $tbody.find( 'tr:visible' ).length;

     let $rowCount = $table.nextAll( '.rowCount' ).first();
     $rowCount.find( 'var.totalRows'   ).text( totalRows   );
     $rowCount.find( 'var.visibleRows' ).text( visibleRows );
  });

Twowheeler