Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

自分用の覚書です。
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でもいいかも?)

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away