如何使用 JQUERY 使用多个表单输入动态过滤表行

Question

我正在显示一个包含多行和多列的表格。我正在使用一个名为 uiTableFilter 的 JQUERY 插件，它使用文本字段输入并根据您提供的输入过滤（显示/隐藏）表行。您所要做的就是指定要过滤的列，它将仅显示在该列中输入了文本字段的行。简单且运行良好。

我想添加第二个文本输入字段，这将帮助我进一步缩小结果范围。因此，例如，如果我有一个 PETS 表，其中一列是 petType，一列是 petColor——我可以在第一个文本字段中输入 CAT，以显示所有猫，然后在第二个文本字段中，我可以输入 black，结果表将仅显示找到 BLACK CATS 的行。基本上是一个子集。

这是我正在使用的 JQUERY：

   $("#typeFilter").live('keyup', function() {

    if ($(this).val().length > 2 || $(this).val().length == 0)
  {
                var newTable = $('#pets');
  $.uiTableFilter( theTable, this.value, "petType" );
  } 

   }) // end typefilter

   $("#colorFilter").live('keyup', function() {
    if ($(this).val().length > 2 || $(this).val().length == 0)
  {
  var newTable = $('#pets');
  $.uiTableFilter( newTable, this.value, "petColor" );

  } 

   }) // end colorfilter

问题是，我可以使用一个过滤器，它将显示表行的正确子集，但是当我为另一个过滤器提供输入时，它似乎无法识别可见的表行这些是上一列中剩余的，但它似乎对原始表进行了全新的过滤。如果应用一个过滤器后返回 10 行，则第二个过滤器应仅适用于这 10 行。我尝试过 LIVE 和 BIND，但不起作用。

谁能告诉我我哪里出错了？谢谢！

Answer 1

uiTableFilter 插件不支持您想要执行的操作。快速浏览一下源代码就会发现这一点：

elems.each(function(){
    var elem = jQuery(this);
    jQuery.uiTableFilter.has_words(getText(elem), words, false)
        ? matches(elem)
        : noMatch(elem);
});

并且扩展为（本质上）：

elems.each(function(){
    var elem = jQuery(this);
    jQuery.uiTableFilter.has_words(getText(elem), words, false)
        ? elem.show()
        : elem.hide();
});

所以它所做的就是旋转所有行，.show()那些匹配的行，以及.hide () 那些没有的； uiTableSorter 不关注行的当前显示/隐藏状态，并且无法告诉它对多个列进行过滤。

如果您确实需要所需的功能，那么您可以修改插件的行为（代码非常小且简单）或者只编写自己的行为。这是一个精简和简化的版本，支持多个过滤器，并且是比 uiTableFilter 更传统的 jQuery 插件：

(function($) {
    $.fn.multiFilter = function(filters) {
        var $table = $(this);
        return $table.find('tbody > tr').each(function() {
            var tr = $(this);

            // Make it an array to avoid special cases later.
            if(!$.isArray(filters))
                filters = [ filters ];

            howMany = 0;
            for(i = 0, f = filters[0]; i < filters.length; f = filters[++i]) {
                var index = 0;
                $table.find('thead > tr > th').each(function(i) {
                    if($(this).text() == f.column) {
                        index = i;
                        return false;
                    }
                });
                var text = tr.find('td:eq(' + index + ')').text();
                if(text.toLowerCase().indexOf(f.word.toLowerCase()) != -1)
                    ++howMany;
            }
            if(howMany == filters.length)
                tr.show();
            else
                tr.hide();
        });
    };
})(jQuery);

我将把错误处理和性能作为读者的练习，这只是一个说明性示例，我不想得到在你的学习方式中。您可以像这样连接它：

$('#type').keyup(function() {
    $('#leeLooDallas').multiFilter({ column: 'petType', word: this.value });
});
$('#color').keyup(function() {
    $('#leeLooDallas').multiFilter([
        { column: 'petType',  word: $('#type').val() },
        { column: 'petColor', word: this.value       }
    ]);
});

这是一个实例（假设您要在“颜色”之前的“类型”中输入某些内容）： http://jsfiddle.net/ambiguously/hdFDt/1/