如何使用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行，則第二個過濾器應僅適用於THOSE 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/ambiguous/hdFDt/1/