jQuery의 테이블에 여러 개의 선택 필터 적용

Question

다른 기준으로 테이블을 필터링하는 3 개의 선택 상자가 있습니다. 예를 들어 사용자가 중간 우선 순위의 레코드를보고 싶다면 예열 대기 중임 & 마감 상태. Closed는 모든 행에 대한 데이터 속성입니다.

내가 할 수 있지만 내 문제는 사용자가 단일 필터를 다시 선택하려는 경우 빈 결과 만 표시하는 것입니다. 나는 경우 사용자가 여기에 무엇을해야

$("#input_filter_priority").change(function() { 
     var data = this.value.split(" "); 

     var $tr_row = $('#project_table').find("tr:not(.hidden)"); 
     var priority_column = $('#project_table').find("tr :not(.hidden) td:nth-child(5)"); 
     if (this.value == "") { 
      $tr_row.show(); 
      return; 
     } 
     $tr_row.hide(); 

     if (filtered_row !== null) { 
      filtered_row = filtered_row.filter(function() { 
       $r = $(this); 
       if ($r.is(":contains('" + data + "')")) { 
        return true; 
       } 
       return false; 
      }) 
       .show(); 
     } else { 
      filtered_row = $tr_row.filter(function() { 
       $tr_text = $(this).val(); 
       $r = $(this); 
       if ($r.is(":contains('" + data + "')")) { 

        return true; 

       } 
       return false; 
      }) 
       .show(); 
     } 


    }); 



    $("#input_closed_filter").change(function() { 
     var data = this.value.split(" "); 
     var $tr_row = $('#project_table').find("tr:not(.hidden)"); 

     if (this.value == "") { 
      $tr_row.show(); 
      return; 
     } 
     $tr_row.hide(); 


     if (filtered_row !== null) { 
      filtered_row = filtered_row.filter(function() { 
       $r = $(this); 
       if ($(this).attr('data-closed').match(data)) { 
        return true; 
       } 
       return false; 
      }) 
       .show(); 

     } else { 
      filtered_row = $tr_row.filter(function() { 
       $tr_text = $(this).val(); 
       if ($(this).attr('data-closed').match(data)) { 
        return true; 
       } 
       return false; 
      }) 
       .show(); 
     } 


    }); 


    $("#input_on_air_filter").change(function() { 
     var data = this.value.split(" "); 

     var $tr_row = $('#project_table').find("tr "); 
     var on_air_column = $('#project_table').find("tr td:nth-child(6)"); 
     if (this.value == "") { 
      $tr_row.show(); 
      return; 
     } 
     $tr_row.hide(); 



     if (filtered_row !== null) { 

      filtered_row = filtered_row.filter(function() { 
       $r = $(this); 
       if ($(this).attr('data-critical').match(data)) { 
        return true; 
       } 
       return false; 
      }) 
       .show(); 
     } else { 
      filtered_row = $tr_row.filter(function() { 
       $tr_text = $(this).val(); 
       $r = $(this); 
       if ($(this).attr('data-critical').match(data)) { 
        return true; 
       } 
       return false; 
      }) 
       .show(); 
     } 
    }); 

가 동일한 필터를 선택 두 번 또는 여러 번 (그는 그의 마음을 변경하는 경우 가정) : 여기에 자바 스크립트입니다.

여기에 관련된 내용은 JSBin입니다.

var priorityFilterData=null; 
var onAirCriticalFilterData=null; 
var closedFilterData=null; 


    function applyFilters(){ 
    var $tr_row = $('#project_table').find("tr"); 
    $tr_row.hide();//hide all rows by default 

    //Show only the rows that meet each filter condition 
    $tr_row.filter(function(){  
     var closedFilterCondition = (closedFilterData === null || $(this).attr('data-closed').match(closedFilterData));   
     var onAirFilterCondition = (onAirCriticalFilterData === null || $(this).attr('data-critical').match(onAirCriticalFilterData));    
     var priorityFilterCondition = (priorityFilterData === null || $(this).is(":contains('" + priorityFilterData + "')"));     
     return closedFilterCondition && onAirFilterCondition && priorityFilterCondition; 
    }).show(); 
    } 


    $("#input_closed_filter").change(function() { 
    closedFilterData = this.value.split(" "); 
    applyFilters(); 
    }); 

    $("#input_on_air_filter").change(function() {  
    onAirCriticalFilterData = this.value.split(" "); 
    applyFilters(); 
    }); 

$("#input_filter_priority").change(function() { 
    priorityFilterData = this.value.split(" "); 
    applyFilters(); 
    }); 

: 여기

Answer 1

단순화/작동 버전