Toggle navigation
Document
Download
Ex Table Filter
$( table ).exTableFilter()
DEMO
条件入力フィールドを自動生成してフィルタリング
$('table.data').exTableFilter();
条件入力フィールドを自動生成してフィルタリング(マークアップを変更)
$('table.data').exTableFilter({ filterFieldTemplate : '
MY FILTER
' });
div.my-filter input{ margin:16px 0; padding:8px; border:solid 4px #ccc; min-width:70%; } div.my-filter input:focus{ color:#00aaff; border-color:#00aaff; background:#ffffe0; }
条件入力フィールドを自前で設置してフィルタリング
MY SEARCH FIELD:
$('table.data').exTableFilter('input.filter'); /* //以下でもOK $('table.data').exTableFilter($('input.filter')); */
一部の列をフィルタリング対象外にする(条件入力フィールド生成時)
No と Qty はフィルターの対象としません。
$('table.data').exTableFilter({ignore:'0,3'});
一部の列をフィルタリング対象外にする(条件入力フィールド設置時)
No と Qty はフィルターの対象としません。
MY SEARCH FIELD:
$('table.data').exTableFilter('input.filter', {ignore:'0,3'}); /* //以下でもOK $('table.data').exTableFilter($('input.filter'), {ignore:'0,3'}); */
列毎に条件入力フィールドを設置してフィルタリング
CLASS or CATEGORY:
QTY:
$('table.data').exTableFilter({ filters : { 1 : 'input.class-category-filter', 2 : 'input.class-category-filter', 3 : $('input.qty-filter') } }); /* //以下でもOK $('table.data').exTableFilter([ '', 'input.class-category-filter', 'input.class-category-filter', $('input.qty-filter') ]); */
プルダウン、ラジオボタン、チェックボックスでフィルタリング
CLASS:
all
core
ui
CATEGORY:
Events
Metaplugin
Utilities
QTY:
26
130
327
$('table.data').exTableFilter({ filters : { 1 : 'input.class-filter', 2 : 'select.category-filter', 3 : 'input.qty-filter' } });
プルダウン、ラジオボタン、チェックボックス、テキストフィールドを自動生成してフィルタリング
No:
CLASS:
CATEGORY:
QTY:
$('table.data').exTableFilter({ filters : { 0 : { append : { to : 'div.no-filter-area', type : 'checkbox' } }, 1 : { append : { to : 'div.class-filter-area', type : 'radio' } }, 2 : { append : { to : 'div.category-filter-area', type : 'select' } }, 3 : { append : { to : 'div.qty-filter-area', type : 'text' } } } });
自動生成される条件入力フィールドと空白条件をカスタマイズ
CLASS:
CATEGORY:
$('table.data').exTableFilter({ filters : { 1 : { append : { template : '
{label}
', addBlank : false, to : 'div.class-filter-area', type : 'radio' } }, 2 : { append : { blankLabel : '全て', to : 'div.category-filter-area', type : 'select' }, selectValueMatch : true } } });
div.my-radio{ margin:8px; display:inline-block; } div.my-radio label{ font-weight:normal; }
独自ロジックでフィルタリング
QTY:
ALL
≧100
≧200
≧300
≧400
$('table.data').exTableFilter({ filters : { 3 : { element : 'input.qty-filter', onFiltering : function(api){ return api.getCurrentCellNum() >= api.getCurrentFilterNum(); } } } });
集計ロジックを記述してフィルタリング
FILTER:
var sum; $('table.data').exTableFilter('input.filter',{ onFilteringStart : function(api){ sum = 0; }, onFiltering : function(api){ if(api.isShowCurrentRow()) sum = sum + api.getCurrentCellNum(3); }, onFilteringEnd : function(api){ $('#sum').html(sum); } });
前方/後方/完全/ワイルドカード一致でフィルタリング
No:
前方
CATEGORY:
ワイルドカード
CLASS:
完全
QTY:
後方
$('table.data').exTableFilter({ filters : { 0 : { element : 'input.no-filter', firstMatch : true }, 1 : { element : 'input.class-filter', fullMatch : true }, 2 : { element : 'input.category-filter', wildcardMatch : true }, 3 : { element : 'input.qty-filter', lastMatch : true } } });
正規表現や関数でフィルタリング
$('table.data').exTableFilter({ filters : { 0 : /^\d$/, 2 : function( api ){ return api.getCurrentCellVal().length >= 5; } } });
QueryString でフィルタリング
CLASS:
all
core
ui
$('table.data').exTableFilter({ filters : { 1 : { element : 'a.class-filter', queryStringMatch : true, queryStringName : 'class' } } });
1つのフィルター条件で複数テーブルをフィルタリング
$('table.data1,table.data2').exTableFilter();
jquery.ex-table-filter.js
No
CLASS
CATEGORY
QTY
1
core
Ajax
203
2
core
Animation and Effects
292
3
core
Browser Tweaks
78
4
core
Data
139
5
core
DOM
141
6
ui
Widgets
242
7
core
Events
130
8
ui
Forms
362
9
core
Integration
102
10
core
JavaScript
148
11
core
jQuery Extensions
219
12
ui
Layout
183
13
ui
Media
129
14
ui
Menus
92
15
core
Metaplugin
22
16
ui
Navigation
148
17
ui
Tables
74
18
ui
User Interface
644
19
core
Utilities
322
20
ui
Drag-and-Drop
32
21
ui
Windows and Overlays
102