JavaScript
jQuery
DataTables

DataTableで独自フォームで検索する方法

自分用の覚書です。

DataTableに独自のフォームを設ける方法ですが、検索条件リセットボタンを設置した際に少しハマったのでメモ。


example.js

jQuery(function($){

$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var form = document.forms[0]; // 1列目の値を取得
var value = form.elements['フォームの名前'].value;

if (value !== '' && data[0] !== value) { // 行の値と一致するか判定
return false;
}

return true;
}
);
// テーブル初期化
var table = $("#テーブルのID").DataTable({
                 ・・・
// 検索機能
searching: true, // falseにすると独自の検索も反映されない
                ・・・
});
// フォーム切り替え時にテーブル更新
$('form').on('change', function(event) {
table.draw();
});
// 検索条件リセット
$('#search_reset').click(function() {
var form = document.forms[0];
form.elements['purpose'].value = '';
form.elements['area'].value = '';
table.draw();
});
});



example.html

<form action="#">

<select name="purpose">
<option value="">Default</option>
                        <option value="Hoge">Hoge</option>
<option value="Fuga">Fuga</option>
</select>
<input name="reset" id="search_reset" class="btn" type="reset" value="リセット">
</form>

<table border="1" id="portfolio-table-list">
<thead>
<tr>
<th>検索する列</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hoge</td>
<td>Fuga</td>
</tr>
</tbody>
</table>


ポイントは$('form').on('change', function(event))でフォームの値が入れ替わった時にテーブルを再描画しているのですが、テーブルの再描画の時に$.fn.dataTable.ext.search.pushが走って検索条件の値で絞り込みを行なっているんですが、type=resetのボタンが押された時は$('form').on('change', function(event)は走りませんので、クリックイベントを手動で追加しています。(これだったらtype=buttonでもいいかも?)