爲（Mottie）的tablesorter filter_selectSource

Question

數據屬性我有一個動態表，其可以包含一個status柱可以包含的狀態的預定義列表，例如：

0: closed 
1: Open 
2: Pending 
3: ... 

狀態標籤被顯示在表中，但id號碼用於實際過濾。我成功應用了tablesorter filter-select來顯示選擇過濾器，但它顯示標籤（不會過濾）或id（不漂亮）。

我能解決這個使用filter_selectSource裏面的javascript，但因爲我的表是動態的，使用車把顯示，我使用的數據屬性尋找一個HTML的解決方案。

是否有數據屬性可用於設置過濾器選擇標籤/值，類似於如何使用data-text來定義未解析的文本？或者有沒有一種方法來定義過濾器的自定義分析器，例如將返回一個標籤/值組合的數組？

Answer 1

基於Mottie答覆，並tablesorter.filter.getOptions源，我想出了這個。將filter-metaselect類添加到我的列th中，可以使用單元td中的data-value屬性作爲選擇選項。解析/未解析的文本仍然可以使用。請注意，getOptions的子部分已被省略，因爲我目前沒有使用功能。

表格單元格：

<td data-value="1"> 
    Projet actif 
</td> 

選擇選項：

<option value="1" parsed="projet actif" data-function-name="1">Projet actif</option> 

的Javascript：

filter_selectSource: { 
    ".filter-metaselect": function (table, column, onlyAvail) { 
     table = $(table)[0]; 
     var rowIndex, tbodyIndex, len, row, cache, indx, child, childLen, colData, 
      c = table.config, 
      wo = c.widgetOptions, 
      arry = []; 
     for (tbodyIndex = 0; tbodyIndex < c.$tbodies.length; tbodyIndex++) { 
      cache = c.cache[tbodyIndex]; 
      len = c.cache[tbodyIndex].normalized.length; 
      // loop through the rows 
      for (rowIndex = 0; rowIndex < len; rowIndex++) { 
       // get cached row from cache.row (old) or row data object 
       // (new; last item in normalized array) 
       row = cache.row ? 
        cache.row[ rowIndex ] : 
        cache.normalized[ rowIndex ][ c.columns ].$row[0]; 
       // check if has class filtered 
       if (onlyAvail && row.className.match(wo.filter_filteredRow)) { 
        continue; 
       } 

       // Get the column data attributes 
       if (row.getElementsByTagName('td')[column].getAttribute('data-value')) { 
        colData = row.getElementsByTagName('td')[column].getAttribute('data-value'); 
       } else { 
        colData = false; 
       } 

       // get non-normalized cell content 
       if (wo.filter_useParsedData || 
        c.parsers[column].parsed || 
        c.$headerIndexed[column].hasClass('filter-parsed')) { 

        arry[ arry.length ] = { 
         value : (colData) ? colData : cache.normalized[ rowIndex ][ column ], 
         text : cache.normalized[ rowIndex ][ column ] 
        }; 

        // child row parsed data 
        /* TODO */ 
       } else { 

        arry[ arry.length ] = { 
         value : (colData) ? colData : cache.normalized[ rowIndex ][ c.columns ].raw[ column ], 
         text : cache.normalized[ rowIndex ][ c.columns ].raw[ column ] 
        }; 

        // child row unparsed data 
        /* TODO */ 
       } 
      } 
     } 

     // Remove duplicates in `arry` since using an array of objects 
     // won't do it automatically 
     var arr = {}; 

     for (var i=0, len=arry.length; i < len; i++) 
      arr[arry[i]['text']] = arry[i]; 

     arry = new Array(); 
     for (var key in arr) 
      arry.push(arr[key]); 

     return arry; 
    } 
} 

Answer 2

filter_selectSource documentation有一個例子，這個小部件選項調用filter.getOptions，它返回一個單元格文本或分析值的數組（基於過濾器分析器設置）;如果這不會返回所需的值，請自行獲取這些值並在該函數中返回一個數組。

下面是如何使用它的一個基本的例子：http://jsfiddle.net/Mottie/856bzzeL/117/（與Is there a way in tablesorter to filter to select only rows where the field is empty?）

$(function(){ 
    $('table').tablesorter({ 
     theme: 'blue', 
     widgets: ['zebra', 'filter'], 
     widgetOptions: { 
      filter_functions: { 
       0: { 
        '{empty}' : function (e, n, f, i, $r, c) { 
         return $.trim(e) === ''; 
        } 
       } 
      }, 
      filter_selectSource: { 
       0: function (table, column, onlyAvail) { 
        // get an array of all table cell contents for a table column 
        var array = $.tablesorter.filter.getOptions(table, column, onlyAvail); 
        // manipulate the array as desired, then return it 
        array.push('{empty}'); 
        return array; 
       } 
      } 
     } 
    }); 

});