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

});

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

Answer 2

您的脚本中可能存在逻辑错误，否则最简单的方法是获取可见行的长度。

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

Answer 3

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 :)