汎用性重視のテーブルフィルタリング系 jQuery プラグイン

汎用性を重視したテーブルフィルタリング系の jQuery プラグインです。
実装の基本思想は以前書いた「jQuery によるシンプルなテーブルフィルタリング処理の実装を考えてみる」に基づいてます。

変更履歴

  • v0.5
    • フィルタ条件の入力フィールドを自動生成する機能を追加しました。
    • Excel のオートフィルタのようなプルダウン、ラジオボタン、チェックボックスによる条件入力フィールドの自動生成機能を追加しました。
    • QueryString によるフィルタリング機能を追加しました。
    • Bootstrap3 対応。
    • 使用手順の説明、デモを大幅刷新しました。
  • v0.4
    • 1つの条件入力フィールドを複数カラムに対し適用した場合、当該フィールドについては OR 条件でフィルタされるようにした。
  • v0.3
    • プラグインの実行時、パラメータ名を指定ぜずフィルター要素のみを指定できるようにした。
      • $(‘table’).exTableFilter([ ‘.filter1′, ‘.filter2′, … ])
  • v0.2
    • select > option 要素の value 属性でフィルタリング可能にした。(selectValueMatch パラメータの追加)

使い方

jQuery と Ex Table Filter の js ファイルを読み込みます。

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  2. <script src="jquery.extablefilter-latest.js"></script>


フィルタリングの対象となるテーブルを書きます。

  1. <table id="data">
  2. <thead>
  3. <tr>
  4. <th>No</th>
  5. <th>Class</th>
  6. <th>Category</th>
  7. <th>Qty</th>
  8. </tr>
  9. </thead>
  10. <tbody>
  11. <tr>
  12. <td>1</td>
  13. <td>core</td>
  14. <td>Ajax</td>
  15. <td>203</td>
  16. </tr>
  17. ・・・
  18. </tbody>
  19. </table>


テーブルに対し exTableFilter() メソッドを実行します。

  1. $('table.data').exTableFilter();


フィルタ条件の入力フィールドがテーブルの上部に生成されます。文字を入力すると各列の値と照合しフィルタリングを行います。

ex-table-filter

条件入力フィールドのマークアップを変更する

自動生成される条件入力フィールドのマークアップは、以下のように filterFieldTemplate パラメータで変更することができます。

  1. $('table.data').exTableFilter({
  2. filterFieldTemplate : '<div class="my-filter"><span>MY FILTER</span> <input type="text"/></div>'
  3. });

ex-table-filter

条件入力フィールドを自前で設置する

条件入力フィールドを自前で設置するには、任意の箇所に以下のよう入力フィールドを記述しておきます。

  1. <div class="form-horizontal">
  2. <label class="col-sm-3 control-label">MY SEARCH FIELD:</label>
  3. <div class="col-sm-9">
  4. <input type="text" class="filter form-control"/>
  5. </div>
  6. </div>


exTableFiter() のパラメータで入力フィールドを指定します。

  1. $('table.data').exTableFilter('input.filter');

ex-table-filter

一部の列をフィルタリング対象外にする

一部の列をフィルタリング対象外にするには、以下のよう ignore パラメータで対象外とする列番号を指定します。

  1. $('table.data').exTableFilter({ignore:'0,3'});


条件入力フィールドを自前で設置してる場合は、第2パラメータで指定します。

  1. $('table.data').exTableFilter('input.filter', {ignore:'0,3'});

列毎に条件入力フィールドを設置してフィルタリングする

列毎に条件入力フィールドを設置するには、filters パラメータで各列に割り当てる入力フィールドを指定します。1つの入力フィールドを複数の列に割あてることもできます。

  1. $('table.data').exTableFilter({
  2. filters : {
  3. 1 : 'input.class-category-filter',
  4. 2 : 'input.class-category-filter',
  5. 3 : $('input.qty-filter')
  6. }
  7. });

ex-table-filter

プルダウン、ラジオボタン、チェックボックスでフィルタリングする

プルダウン、ラジオボタン、チェックボックスでもフィルタリングできます。

ex-table-filter

プルダウン、ラジオボタン、チェックボックス、テキストフィールドを自動生成してフィルタリングする

プルダウンやラジオボタンの選択値を自前で記述するのが面倒な場合は、以下のよう append パラメータを指定することで自動生成させることができます。to パラメータに挿入先、type パラメータに要素の種類を指定します。

  1. $('table.data').exTableFilter({
  2. filters : {
  3. 0 : {
  4. append : {
  5. to : 'div.no-filter-area',
  6. type : 'checkbox'
  7. }
  8. },
  9. 1 : {
  10. append : {
  11. to : 'div.class-filter-area',
  12. type : 'radio'
  13. }
  14. },
  15. 2 : {
  16. append : {
  17. to : 'div.category-filter-area',
  18. type : 'select'
  19. }
  20. },
  21. 3 : {
  22. append : {
  23. to : 'div.qty-filter-area',
  24. type : 'text'
  25. }
  26. }
  27. }
  28. });

ex-table-filter

自動生成される条件入力フィールドと空白条件をカスタマイズする

自動生成される条件入力フィールドのマークアップ、プルダウンやラジオボタンの未指定時の条件等を指定することができます。

  1. $('table.data').exTableFilter({
  2. filters : {
  3. 1 : {
  4. append : {
  5. template : '<div class="my-radio"><label><input type="radio"/> {label}</label></div>',
  6. addBlank : false,
  7. to : 'div.class-filter-area',
  8. type : 'radio'
  9. }
  10. },
  11. 2 : {
  12. append : {
  13. blankLabel : '全て',
  14. to : 'div.category-filter-area',
  15. type : 'select'
  16. },
  17. selectValueMatch : true
  18. }
  19. }
  20. });
  • template パラメータでマークアップを変更できます。
  • プルダウンやラジオボタンで addBlank パラメータを false にすると未指定条件が生成されません。
  • blankLabel パラメータでは未指定条件のラベルが指定できます。
  • selectValueMatch を true にすると option 要素の value 属性でフィルタリングします。

ex-table-filter

独自ロジックでフィルタリングする

独自のフィルタリングを行いたい場合は、onFiltering パラメータにフィルタリングロジックを記述します。例えば指定カラムの数値が一定の範囲の場合のみ表示するには以下のよう記述します。

  1. <input type="radio" class="qty-filter" name="qty-filter" value="100"/>≧100
  2. <input type="radio" class="qty-filter" name="qty-filter" value="200"/>≧200
  3. <input type="radio" class="qty-filter" name="qty-filter" value="300"/>≧300

  1. $('table.data').exTableFilter({
  2. filters : {
  3. 3 : {
  4. element : 'input.qty-filter',
  5. onFiltering : function(api){
  6. return api.getCurrentCellNum() >= api.getCurrentFilterNum();
  7. }
  8. }
  9. }
  10. });

API オブジェクトの getCurrentCellNum() メソッドにてフィルタリング中の数値変換したセル値、getCurrentFilterNum()にて数値変換したフィルタ条件値を求め値を比較しています。返却値に true を返すと表示対象となります。

ex-table-filter

フィルタリング後の集計処理を記述してする

フィルタリング中もしくはフィルタイリングの開始終了時に、処理を割り込ませることができます。例えば表のフッターに集計行を設け、フィルタリングの都度、再集計した結果を表示するには、以下のように記述することができます。

  1. var sum;
  2. $('table.data').exTableFilter('input.filter',{
  3. onFilteringStart : function(api){
  4. sum = 0;
  5. },
  6. onFiltering : function(api){
  7. if(api.isShowCurrentRow()) sum = sum + api.getCurrentCellNum(3);
  8. },
  9. onFilteringEnd : function(api){
  10. $('#sum').html(sum);
  11. }
  12. });

以下のコールバック関数を使用し、フィルタリング処理に集計処理を割り込ませています。

  • onFilteringStart
    • フィルタリング開始前に実行されます。集計変数の初期化をしています。
  • onFiltering
    • 1行フィルタリング判定する毎に実行されます。isShowCurrentRow() メソッドでカレント行が表示状態であるかを判定し、表示されてる場合のみ集計処理を行っています。getCurrentCellNum() メソッドでは参照したい列番号(例では3)を指定することで特定列の値を参照することができます。
  • onFilteringEnd
    • フィルタリング終了時に実行されます。集計結果を表示してます。

ex-table-filter

前方/後方/完全/ワイルドカード一致でフィルタリングする

前方一致、後方一致、完全一致、ワイルドカード一致等のフィルタリングの一致条件を指定することができます。
各一致条件を適用するには以下のパラメータに true を指定します。

  • firstMatch
    • 前方一致フィルタ。先頭の文字列が一致するデータのみが表示対象となります。
  • lastMatch
    • 後方一致フィルタ。最後の文字列が一致するデータのみが表示対象となります。
  • fullMatch
    • 完全一致フィルタ。全ての文字列が一致するデータのみが表示対象となります。
  • wildcardMatch
    • ワイルドカード一致フィルタ。フィルタ条件指定外の部分に * を指定する必要があります。例えば jquery.js というデータを表示さるには jquery.* のように指定します。(jquery. では表示されません)

  1. $('table.data').exTableFilter({
  2. filters : {
  3. 0 : {
  4. element : 'input.no-filter',
  5. firstMatch : true
  6. },
  7. 1 : {
  8. element : 'input.class-filter',
  9. fullMatch : true
  10. },
  11. 2 : {
  12. element : 'input.category-filter',
  13. wildcardMatch : true
  14. },
  15. 3 : {
  16. element : 'input.qty-filter',
  17. lastMatch : true
  18. }
  19. }
  20. });

ex-table-filter

正規表現や関数でフィルタリングする

filters パラメータに条件入力フィールドを指定せず、正規表現や関数を指定する事ができます。例えば「No」列が一桁の数字で、「CATEGORY」列が 5 文字以上の行を抽出するには以下のように記述します。

  1. $('table.data').exTableFilter({
  2. filters : {
  3. 0 : /^\d$/,
  4. 2 : function( api ){
  5. return api.getCurrentCellVal().length >= 5;
  6. }
  7. }
  8. });

QueryString でフィルタリングする

以下のように記述することで QueryString の値でフィルタリングすることができます。

  1. $('table.data').exTableFilter({
  2. filters : {
  3. 1 : {
  4. element : 'a.class-filter',
  5. queryStringMatch : true,
  6. queryStringName : 'class'
  7. }
  8. }
  9. });

queryStringMatch に true、queryStringName には適用する QueryString のパラメータ名を指定します。element パラメータは画面上に QeeryString 付きの内部リンクがある場合に指定すると、当該リンクに遷移した際、クラス名に “active” が割り振られるようになります。

ex-table-filter

1つのフィルター条件で複数テーブルをフィルタリングする

複数テーブルを選択した状態でプラグインを実行することで、1つのフィルター条件で複数テーブルをフィルタリングすることができます。

  1. $('table.data1,table.data2').exTableFilter();

ex-table-filter

パラメータ

プラグイン実行時、下記パラメータを指定できます。

  1. defaults : {
  2. api : false, // true の場合 api オブジェクトを返す
  3. filters : [], // 各カラムのフィルタ条件を配列又は JSON 形式でまとめて指定
  4. autoFilter : true, // プラグイン適用後のフィルタリングの自動実行の適用
  5. autoBindFilter : true, // トリガーの自動割り当ての適用
  6. elementAutoBindTrigger : 'keydown change', // 自動割り当てするトリガーの指定
  7. elementAutoBindFilterDelay : 300, // フィルタトリガー起動時のフィルタリング実行間隔の指定
  8. startDataRowNo : 0, // フィルタリング開始行の指定
  9. callback : function(api){}, // プラグイン適用後のコールバック処理の指定
  10. onFilteringStart : function(api){}, // フィルタリング開始時のコールバック処理の指定
  11. onFiltering : function(api){}, // 各行のフィルタリング後のコールバック処理の指定
  12. onFilteringEnd : function(api){}, // フィルタリング終了時のコールバック処理の指定
  13. elementFilter : { // input:text 要素でフィルタする場合のデフォルト設定
  14. element : '', // フィルタ条件の入力フィールドを指定
  15. firstMatch : false, // 前方一致フィルタの適用
  16. lastMatch : false, // 後方一致フィルタの適用
  17. fullMatch : false, // 完全一致フィルタの適用
  18. wildcardMatch : false, // ワイルドカードフィルタの適用
  19. matchSwitch : 'ig', // 正規表現フィルタのスイッチを指定
  20. queryStringMatch : false, // QueryString の値でフィルタリング
  21. queryStringName : '', // queryStringMatch が true 時に照合するパラメータ名を指定
  22. onFiltering : function(api){}
  23. },
  24. selectElementFilter : { // select,radio,checkbox 要素でフィルタする場合のデフォルト設定
  25. selectValueMatch : false, // select 要素でフィルタする場合の value 属性で一致判定する
  26. element : '', // elementFilterと同様
  27. firstMatch : false, // elementFilterと同様
  28. lastMatch : false, // elementFilterと同様
  29. fullMatch : true, // 完全一致フィルタの適用
  30. wildcardMatch : false, // elementFilterと同様
  31. matchSwitch : '', // elementFilterと同様
  32. onFiltering : function(api){}
  33. },
  34. appendFilter : {
  35. to : '',
  36. type : '',
  37. 'text' : {
  38. template : '<input class="form-control" type="text"/>'
  39. },
  40. 'checkbox' : {
  41. template : '<div class="checkbox"><label><input type="checkbox"/>{label}</label></div>'
  42. },
  43. 'radio' : {
  44. addBlank : true,
  45. blankLabel : 'all',
  46. blankValue : '',
  47. template : '<div class="radio"><label><input type="radio""/>{label}</label></div>'
  48. },
  49. 'select' : {
  50. addBlank : true,
  51. blankLabel : '',
  52. blankValue : '',
  53. template : '<select class="form-control"/>'
  54. }
  55. },
  56. filterFieldTemplate : '<div><label>FILTER:</label><input type="text" class="form-control"/></div>'
  57. },

API

API オブジェクトを使用し、下記メソッドを実行できます。

  1. // プラグイン適用要素の独自データ属性(data-ex-table-filter)を取得する
  2. getDataParam : function(){
  3.  
  4. // プラグイン適用要素を取得する
  5. getTarget : function(){
  6.  
  7. // フィルタリング中のフィルタを取得する
  8. getCurrentFilter : function(){
  9.  
  10. // フィルタリング中のフィルタの値を取得する
  11. getCurrentFilterVal : function(){
  12.  
  13. // フィルタリング中のフィルタの値を数値変換して取得する
  14. getCurrentFilterNum : function(){
  15.  
  16. // フィルタリング中の TR 要素を取得する
  17. getCurrentRow : function(){
  18.  
  19. // フィルタリング中の TH/TD 要素を取得する
  20. getCurrentCell : function(index){
  21.  
  22. // フィルタリング中の TH/TD 要素の値を取得する
  23. getCurrentCellVal : function(index){
  24.  
  25. // フィルタリング中の TH/TD 要素の値を数値変換して取得する
  26. getCurrentCellNum : function(index){
  27.  
  28. // フィルタリング中の行の表示状態を取得する
  29. isShowCurrentRow : function(){
  30.  
  31. // 各カラムのフィルタ条件を配列又は JSON 形式でまとめて設定する
  32. setFilters : function(filters, config){
  33.  
  34. // 特定のカラムのフィルタ条件を設定する
  35. setFilter : function(index, filter, config){
  36.  
  37. // フィルタリングを実行する
  38. filtering : function(){

API オブジェクトの取得方法

API オブジェクトは以下の方法で取得することができます。

コールバック関数内で取得

  1. $(target).exTableFilter({
  2. callback : function(api){
  3. api
  4. }
  5. });

data() メソッドで取得

  1. var api = $(target).exTableFilter().data($.plugin.id);

API パラメータを指定して取得

  1. var api = $(target).exTableFilter({api:true});

ダウンロード

こちらからどうぞ。