jquery tablesorter filter - 如何计算过滤的行数

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 文件以添加回调函数：

在 return table; 之前的第 147 行添加此内容，即将结束 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);
    }
});

这应该为你做:)

Answer 3

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

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

Answer 4

这对我有用：

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

然后，

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

Answer 5

如果编写了这个可重用的 jQuery 函数，该函数应用表格排序器并在每个表格下方添加一行，显示总行数和可见行数。它还在顶部添加了一个简短的帮助文本，链接到过滤器语法（实际上非​​常丰富和强大）。

props 是应用于 jQuery 选择器 selector 中指定的表的表排序器属性。在其中添加所需的过滤选项（以及所有其他表格排序器选项/首选项）。

请注意，如果您想计算表格中显示的数据项的数量，那么按照其他一些答案的建议，计算 table 中 trs 的数量不会给您正确的数字。这将是一个过度计数 - 最常见的是 2 - 因为它包括表格的原始标题行（如果存在）、任何页脚行以及由 tablesorter 动态添加到表格标题中的过滤器行。而是计算table 的tbody 中trs 的数量。

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