jquery tablesorter过滤器 - 如何计算过滤的行

Question

我正在使用jQuery插件jquery-tablesorter-filter.它很棒.当我想要计算表被过滤后的行数时,我有问题.

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

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

这是计算过滤行(当前在屏幕上的行)的代码.但它没有给我正确的结果.它给出了过滤行的最后计数,而不是当前计数.它总是给出一个键击的结果.

$("#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

内置事件有什么问题:http://mottie.github.com/tablesorter/docs/example-option-show-processing.html

示例如下所示:

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

Answer 2

只需编辑 tablesorterFilter js 文件即可添加回调函数：

在第 147 行即将return table;结束之前添加此内容doFilter()

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

然后改变这个：

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

到

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

现在你只需要在这里定义你的回调函数

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

这应该适合你:)