jquery tablesorterのドロップダウンフィルタで同じセル内の複数の値を区別することはできますか？

Question

https://mottie.github.io/tablesorter/docs/example-widget-filter-custom.htmlは、First-Nameカラムのフィルタで、セルの内容はフィルタオプション、CityとTotalはフィルタ値として事前定義されたオプションを持っています。

事前定義されたオプションを使用する可能性がすべてわからないため、セルの内容を複数の値にすることがあるため、セルの内容をフィルタオプションとして使用する必要があります。行が関連付けられている1つ以上のカテゴリを列挙する列Categoryを想像してください。コンマ、改行、brタグなどで区切ることができます。どのようにすべてのリストを表示しなくても、それぞれのカテゴリごとにトップダウンリストにドロップダウンフィルタを追加できますか？自動ドロップダウンを使用すると、セルの内容がフィルタオプションとして取得されます。 「Loan、Insurance」は、「Loan」と「Insurance」の2つのオプションではなく、フィルタオプションになります。これらが区切りタグで区切られていれば、事はもっと醜いものに見えます。

ありがとうございます！

Answer 1

filter_selectSource optionを使用して、その列の選択肢にオプションを追加できるようです。

組み込みのgetOptions functionを使用すると、現在の列の値を取得できます。彼らはカンマで区切られている場合は、カンマを使用してアレイに参加することができ、再分割の結果（demo）

$(function() { 
    $('table').tablesorter({ 
    theme: 'blue', 
    widgets: ['zebra', 'filter'], 
    widgetOptions: { 
     filter_selectSource: function(table, column, onlyAvail) { 
     var array = $.tablesorter.filter.getOptions(table, column, onlyAvail); 
     return array.join(',').split(/\s*,\s*/); 
     } 
    } 
    }); 
}); 

編集：また、「フィルタ・マッチ」クラス（「フィルタ選択を追加してください"）を選択して、選択したオプションにのみ一致させます。それ以外の場合は完全一致にデフォルト設定されます。

---

更新：データは<br>年代を用いて分離されている場合、あなたは、あなたが同じコード（demo）を使用することができ、カンマで<br>を置き換えるために、カスタム・パーサーを追加する必要があります

ヘッダは、パーサの設定のみ使用するフィルタウィジェットを伝えるために、2つの以上のクラスを必要とするデータを構文解析：

<th class="filter-select filter-match sorter-html filter-parsed">Animals</th> 

JS

$(function() { 

    $.tablesorter.addParser({ 
    id: 'html', 
    is: function() { 
     return false; 
    }, 
    format: function(str, table, cell) { 
     var c = table.config, 
     html = cell.innerHTML; 
     if (html) { 
     // replace <br> with a comma 
     html = html.replace(/\s*<br\s*\/?>\s*/g, ',') 
     html = $.trim(c.ignoreCase ? html.toLocaleLowerCase() : html); 
     html = c.sortLocaleCompare ? $.tablesorter.replaceAccents(html) : html; 
     } 
     return html; 
    }, 
    type: 'text' 
    }); 

    $('table').tablesorter({ 
    theme: 'blue', 
    widgets: ['zebra', 'filter'], 
    widgetOptions: { 
     filter_selectSource: function(table, column, onlyAvail) { 
     var array = $.tablesorter.filter.getOptions(table, column, onlyAvail); 
     return array.join(',').split(/\s*,\s*/); 
     } 
    } 
    }); 
});