JQUERY를 사용하여 여러 폼 입력을 사용하여 테이블 행을 동적으로 필터링하는 방법

Question

여러 행과 열이있는 테이블을 표시하고 있습니다. 저는 uiTableFilter이라는 JQUERY 플러그인을 사용하고 있습니다.이 플러그인은 사용자가 입력 한 내용을 기반으로 테이블 행을 필터링하고 (표시/숨김) 텍스트 입력을 사용합니다. 필터링 할 열을 지정하면 해당 열에 입력 된 텍스트 필드가있는 행만 표시됩니다. 단순하고 잘 작동합니다.

결과를 더욱 좁히는 데 도움이되는 두 번째 텍스트 입력 필드를 추가하고 싶습니다. 예를 들어 PETS 테이블이 있고 한 열이 petType이고 한 개가 petColor 인 경우 - 첫 번째 텍스트 필드에 고양이를 입력하여 모든 고양이를 표시 한 다음 두 번째 텍스트 필드에 검정색, 결과 테이블에는 BLACK CATS가있는 행만 표시됩니다. 기본적으로 하위 집합입니다. 여기

가 JQUERY I가 사용하고있다 : I는 하나 개의 필터를 사용할 수

$("#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 개의 행에만 적용되어야합니다. 나는 살고 바인딩을 시도했지만 작동하지 않습니다.

누군가 내가 잘못 가고있는 부분에 대해 밝힐 수 있습니까? 감사!

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는 현재 표시된/숨겨진 행 상태에주의를 기울이지 않으며 여러 열을 필터링하도록 지시 할 방법이 없습니다.

정말로 원하는 기능이 필요한 경우 플러그인의 동작을 수정할 수 있습니다 (코드는 매우 작고 간단합니다). 또는 직접 작성하십시오. 나는 독자들에게 운동으로 오류 처리와 성능을 떠날거야

(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); 

, 이것은 단지 예시된다 : 여기에 여러 개의 필터를 지원하며 uiTableFilter보다 기존의 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/