2016-12-06 1 views
1

"filter-select"특성이있는 열의 필터로 열 값을 제거하는 방법이 있습니까?Tablesorter : 특정 열 값을 필터로 표시하지 않습니다.

다음은 @mottie의 jsfiddle http://jsfiddle.net/Mottie/856bzzeL/1085/의 예입니다. 방금 열 "필터 선택"을 추가했습니다 동물 열. 예를 들어 코알라을 드롭 다운 필터 값에서 제거하는 방법이 있습니까?

HTML

<table class="tablesorter"> 
<thead> 
    <tr> 
     <th>AlphaNumeric</th> 
     <th>Numeric</th> 
     <th class="filter-match filter-select">Animals</th> 
     <th>Sites</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>abc 123</td> 
     <td>10</td> 
     <td>Koala</td> 
     <td>http://www.google.com</td> 
    </tr> 
    <tr> 
     <td>abc 1</td> 
     <td>234</td> 
     <td>Ox</td> 
     <td>http://www.yahoo.com</td> 
    </tr> 
    <tr> 
     <td>abc 9</td> 
     <td>10</td> 
     <td>Girafee</td> 
     <td>http://www.facebook.com</td> 
    </tr> 
    <tr> 
     <td>zyx 24</td> 
     <td>767</td> 
     <td>Bison</td> 
     <td>http://www.whitehouse.gov/</td> 
    </tr> 
    <tr> 
     <td>abc 11</td> 
     <td>3</td> 
     <td>Chimp</td> 
     <td>http://www.ucla.edu/</td> 
    </tr> 
</tbody> 

스크립트 :이 경우 tablesorter에

/* Documentation for this tablesorter FORK can be found at 
* http://mottie.github.io/tablesorter/docs/ 
*/ 
// See http://stackoverflow.com/q/40899404/145346 
$(function(){ 
    $('table').tablesorter({ 
     theme: 'blue', 
     widgets: ['zebra', 'filter'], 
     widgetOptions: { 
      filter_defaultFilter: { 
     // Ox will always show 
     2: '{q}|Ox' 
     } 
     } 
    }); 
}); 

답변

0

, 당신은 선택 (demo)

의 옵션을 조작 할 filter_selectSource option가 필요합니다
$(function() { 
    $('table').tablesorter({ 
    theme: 'blue', 
    widgets: ['zebra', 'filter'], 
    widgetOptions: { 
     filter_defaultFilter: { 
     // Ox will always show 
     2: '{q}|Ox' 
     }, 
     filter_selectSource: function(table, column, onlyAvail) { 
     // get an array of all table cell contents for a table column 
     var array = $.tablesorter.filter.getOptions(table, column, onlyAvail); 
     // remove Koala (multiple entries) from array 
     return $.grep(array, function(animal) { 
      return animal !== "Koala"; 
     }); 
     } 
    } 
    }); 
}); 
관련 문제