jQuery 테이블 목록 외부 날짜 범위 필터

Question

나는 tablesorter (jQuery 플러그인)을 사용자 정의 테이블과 함께 사용하며이 테이블을 example과 같은 날짜 범위로 필터링하려고합니다. 이 예제와 달리, 테이블 외부에 내 날짜 범위를 갖고 싶습니다. 나는 그들이 마지막 업데이트 here에있는 테이블 밖에서 필터를 갖는 방법을 포함하고 있다는 것을 알고있다. 가능한지 알고 싶습니다. 그렇지 않다면 Javascript로 할 수있는 방법이 있습니까? 내가 도움의 어떤 종류를 주셔서 감사합니다, 그래서

filter_functions: { 

    MySelectBox :{ 
       "Show all" : function(e, n, f, i) { 
        return ; // Show all entries 
       }, 
       "Newest": function(e, n, f, i) { 
        return ; // Today's entries 
       } 
    } 
} 

내가 자바 스크립트의 전문가가 아니에요 :

나는 이런 일을하고 싶습니다.

감사합니다.

Answer 1

가장 쉬운 해결책은 모든 기본 필터 입력을 추가하는 것입니다. 외부 선택을 추가하고 내부 선택을 업데이트합니다.

HTML

<select> 
    <option>Show all</option> 
    <option>Newest</option> 
    <option>Older</option> 
</select> 
<table class="tablesorter"> 
    <thead> 
     <tr> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Age</th> 
      <th data-placeholder="Show all">Date</th> 
     </tr> 
    </thead> 
    <tbody> 
    ... 
    </tbody> 
</table> 

CSS

.tablesorter-filter-row { 
    display: none; 
} 

스크립트

var $table = $('table'), 
    today = new Date().getTime(); 

$('select').change(function() { 
    $table 
     // target the 4th (zero-based index) filter 
     // and update it with the value from the external select 
     .find('.tablesorter-filter').eq(3).val($(this).val()) 
     .change(); 
}); 

$table.tablesorter({ 
    widgets: ['zebra', 'filter'], 
    widgetOptions: { 
     filter_functions: { 
      3: { 
       "Newest": function (e, n, f, i) { 
        return n >= today; 
       }, 
       "Older": function (e, n, f, i) { 
        return n < today; 
       } 
      } 
     } 

    } 
}); 

: 다음 필터 행 ( demo)를 숨기기