如何使用JQUERY使用多個表單輸入動態地過濾錶行

Question

我正在顯示一個包含多行和多列的表。我正在使用名爲uiTableFilter的JQUERY插件，該插件使用文本字段輸入並根據您提供的輸入過濾（顯示/隱藏）表格行。你所要做的就是指定一個你想要過濾的列，它將只顯示在該列中有文本字段輸入的行。簡單，工作正常。

我想添加第二個文本輸入字段，這將有助於我進一步縮小搜索結果的範圍。因此，例如，如果我有一個PETS表，一列是petType，另一個是petColor - 我可以在第一個文本字段中鍵入CAT，以顯示所有的貓，然後在第二個文本字段中，我可以鍵入黑色，並且生成的表格將只顯示發現黑貓的行。基本上，一個子集。

這裏是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不關注行的當前顯示/隱藏狀態，也無法告訴它在多列上過濾。

如果您確實需要您期望的功能，那麼您可以修改插件的行爲（代碼非常小且簡單）或者只需編寫自己的代碼。下面是支持多種過濾器，是一個更傳統的jQuery插件比uiTableFilter一個精簡和簡化版本：

(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/