Ex Table Filter | jQuery Plugin

条件入力フィールドを自動生成してフィルタリング

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

条件入力フィールドを自動生成してフィルタリング(マークアップを変更)

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

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;
}

条件入力フィールドを自前で設置してフィルタリング

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

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

/*
//以下でもＯＫ
$('table.data').exTableFilter($('input.filter'));
*/

一部の列をフィルタリング対象外にする(条件入力フィールド生成時)

No と Qty はフィルターの対象としません。

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

一部の列をフィルタリング対象外にする(条件入力フィールド設置時)

No と Qty はフィルターの対象としません。

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

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

/*
//以下でもＯＫ
$('table.data').exTableFilter($('input.filter'), {ignore:'0,3'});
*/

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

<div class="form-horizontal">
	<label class="col-sm-3 control-label">CLASS or CATEGORY:</label>
	<div class="col-sm-6">
		<input type="text" class="class-category-filter form-control"/>
	</div>
	<label class="col-sm-1 control-label">QTY:</label>
	<div class="col-sm-2">
		<input type="text" class="qty-filter form-control"/>
	</div>
</div>

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

/*
//以下でもＯＫ
$('table.data').exTableFilter([
	'',
	'input.class-category-filter',
	'input.class-category-filter',
	$('input.qty-filter')
]);
*/

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

<div class="form-horizontal">
	<label class="col-sm-1 control-label">CLASS:</label>
	<div class="col-sm-2">
		<div class="radio">
			<label><input type="radio" class="class-filter" name="class-filter" value=""/>all</label>
		</div>
		<div class="radio">
			<label><input type="radio" class="class-filter" name="class-filter" value="core"/>core</label>
		</div>
		<div class="radio">
			<label><input type="radio" class="class-filter" name="class-filter" value="ui"/>ui</label>
		</div>
	</div>
	<label class="col-sm-2 control-label">CATEGORY:</label>
	<div class="col-sm-4">
		<select class="category-filter form-control">
			<option></option>
			<option>Events</option>
			<option>Metaplugin</option>
			<option>Utilities</option>
		</select>
	</div>
	<label class="col-sm-1 control-label">QTY:</label>
	<div class="col-sm-2">
		<div class="checkbox">
			<label><input type="checkbox" class="qty-filter" value="26"/>26</label>
		</div>
		<div class="checkbox">
			<label><input type="checkbox" class="qty-filter" value="130"/>130</label>
		</div>
		<div class="checkbox">
			<label><input type="checkbox" class="qty-filter" value="327"/>327</label>
		</div>
	</div>
</div>

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

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

<div class="form-horizontal">
	<label class="col-sm-1 control-label">No:</label>
	<div class="col-sm-3 no-filter-area inline-form">
	</div>
	<label class="col-sm-1 control-label">CLASS:</label>
	<div class="col-sm-1 class-filter-area">
	</div>
	<label class="col-sm-2 control-label">CATEGORY:</label>
	<div class="col-sm-2 category-filter-area">
	</div>
	<label class="col-sm-1 control-label">QTY:</label>
	<div class="col-sm-1 qty-filter-area">
	</div>
</div>

$('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'
			}
		}
	}
});

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

<div class="form-horizontal">
	<label class="col-sm-1 control-label">CLASS:</label>
	<div class="col-sm-5 class-filter-area">
	</div>
	<label class="col-sm-2 control-label">CATEGORY:</label>
	<div class="col-sm-4 category-filter-area">
	</div>
</div>

$('table.data').exTableFilter({
	filters : {
		1 : {
			append : {
				template : '<div class="my-radio"><label><input type="radio"/> {label}</label></div>',
				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;
}

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

<div class="form-horizontal">
	<label class="col-sm-1 control-label">QTY:</label>
	<div class="col-sm-11 qty-filter-area inline-form">
		<div class="radio">
			<label><input type="radio" class="qty-filter" name="qty-filter" value="0" checked/>ALL</label>
		</div>
		<div class="radio">
			<label><input type="radio" class="qty-filter" name="qty-filter" value="100"/>≧100</label>
		</div>
		<div class="radio">
			<label><input type="radio" class="qty-filter" name="qty-filter" value="200"/>≧200</label>
		</div>
		<div class="radio">
			<label><input type="radio" class="qty-filter" name="qty-filter" value="300"/>≧300</label>
		</div>
		<div class="radio">
			<label><input type="radio" class="qty-filter" name="qty-filter" value="400"/>≧400</label>
		</div>
	</div>
</div>

$('table.data').exTableFilter({
	filters : {
		3 : {
			element : 'input.qty-filter',
			onFiltering : function(api){
				return api.getCurrentCellNum() >= api.getCurrentFilterNum();
			}
		}
	}
});

集計ロジックを記述してフィルタリング

<div class="form-horizontal">
	<label class="col-sm-2 control-label">FILTER:</label>
	<div class="col-sm-10">
		<input type="text" class="filter form-control"/>
	</div>
</div>

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);
	}
});

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


<div class="form-group col-sm-6">
	<label>No:</label>
	<span>前方</span>
	<input type="text" class="no-filter form-control" value="2"/> 
</div>
<div class="form-group col-sm-6">
	<label>CATEGORY:</label>
	<span>ワイルドカード</span>
	<input type="text" class="category-filter form-control" value="*and*"/> 
</div>
<div class="form-group col-sm-6">
	<label>CLASS:</label>
	<span>完全</span>
	<input type="text" class="class-filter form-control" value="ui"/> 
</div>
<div class="form-group col-sm-6">
	<label>QTY:</label>
	<span>後方</span>
	<input type="text" class="qty-filter form-control" value="02"/> 
</div>

$('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
		}
	}
});

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

<div class="form-horizontal">
</div>

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

QueryString でフィルタリング

<label>CLASS:</label>
<ul>
	<li><a href="demo.html" class="class-filter core">all</a></li>
	<li><a href="?class=core" class="class-filter core">core</a></li>
	<li><a href="?class=ui" class="class-filter ui">ui</a></li>
</ul>

$('table.data').exTableFilter({
	filters : {
		1 : {
			element : 'a.class-filter',
			queryStringMatch : true,
			queryStringName : 'class'
		}
	}
});

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

<div class="form-horizontal">
</div>

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

jquery.ex-table-filter.js

<table class="table data">
	<thead>
		<tr>
			<th class="no">No</th>
			<th class="class">CLASS</th>
			<th class="category">CATEGORY</th>
			<th class="qty num">QTY</th>
		</tr>
	</thead>
	<tbody>
		<tr><td>1</td><td>core</td>    <td>Ajax</td><td class="num">203</td></tr>
		<tr><td>2</td><td>core</td>    <td>Animation and Effects</td><td class="num">292</td></tr>
		<tr><td>3</td><td>core</td>    <td>Browser Tweaks</td><td class="num">78</td></tr>
		<tr><td>4</td><td>core</td>    <td>Data</td><td class="num">139</td></tr>
		<tr><td>5</td><td>core</td>    <td>DOM</td><td class="num">141</td></tr>
		<tr><td>6</td><td>ui</td>     <td>Widgets</td><td class="num">242</td></tr>
		<tr><td>7</td><td>core</td>    <td>Events</td><td class="num">130</td></tr>
		<tr><td>8</td><td>ui</td>      <td>Forms</td><td class="num">362</td></tr>
		<tr><td>9</td><td>core</td>    <td>Integration</td><td class="num">102</td></tr>
		<tr><td>10</td><td>core</td>   <td>JavaScript</td><td class="num">148</td></tr>
		<tr class="delim"><td></td>    <td></td><td></td><td></td></tr>
		<tr><td>11</td><td>core</td>   <td>jQuery Extensions</td><td class="num">219</td></tr>
		<tr><td>12</td><td>ui</td>     <td>Layout</td><td class="num">183</td></tr>
		<tr><td>13</td><td>ui</td>     <td>Media</td><td class="num">129</td></tr>
		<tr><td>14</td><td>ui</td>     <td>Menus</td><td class="num">92</td></tr>
		<tr><td>15</td><td>core</td>   <td>Metaplugin</td><td class="num">22</td></tr>
		<tr><td>16</td><td>ui</td>     <td>Navigation</td><td class="num">148</td></tr>
		<tr><td>17</td><td>ui</td>     <td>Tables</td><td class="num">74</td></tr>
		<tr><td>18</td><td>ui</td>     <td>User Interface</td><td class="num">644</td></tr>
		<tr><td>19</td><td>core</td>   <td>Utilities</td><td class="num">322</td></tr>
		<tr><td>20</td><td>ui</td>      <td>Drag-and-Drop</td><td class="num">32</td></tr>
		<tr class="delim"><td></td>    <td></td><td></td><td></td></tr>
		<tr><td>21</td><td>ui</td>     <td>Windows and Overlays</td><td class="num">102</td></tr>
	</tbody>	
	<tfoot>
		<tr>
			<th colspan="3"/>
			<th id="sum" class="num"> </th>
		</tr>
	</tfoot>
</table>