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

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

example.js

jQuery(function($){
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var form = document.forms[0]; // １列目の値を取得
            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でもいいかも？）