Datatables小ネタ集

Datatables javascript

Datatablesとは

DataTables | Table plug-in for jQuery

行選択イベント

行選択時のイベントを捕まえる方法は二通りある。

select/deselectイベント

  • ユーザーによる選択でもコードによる選択でも発火する。
  • タイミングは選択された「後」。
  • singleモードだとselectより先に前に選択されていた行のdeselectが発火する。

user-selectイベント

  • ユーザーによる選択のみで発火する。
  • タイミングは選択される「前」、なのでキャンセルが可能。
  • selectでもdeselectでも発火する。クリックされたのが選択行か、未選択行かで判別できる。

AJAXリクエストを中止する

table.settings()[0].jqXHR.abort();

リクエスト開始前だとtable.settings()[0].jqXHRがnullなので注意。

FixedColumnsとinput

FixedColumnsで作成した固定列にinputを配置するとpostのときに同じ名前の値が２つ飛ぶ。これは固定列が実はクローンであり、裏側にオリジナルが隠れているため。クライアント側、またはサーバー側でなんらかの対応が必要。

ちなみに縦スクロールを有効にした場合のヘッダー・フッターもクローンなのでinputを配置すると同じ問題が発生する。というわけでinputを固定列やヘッダー・フッターに配置するのはなるべく避けたい。

セルの結合

tbodyでのrowspanはできない。

inputを配置した列のソート

通常、ソートには内部のキャッシュが利用されるためロード後に入力された値はソートに反映されない。入力された値でソートしたい場合は下記のリンクを参照。

columns.orderDataType

DataTables example - Live DOM ordering

inputを配置した列のファイル出力

こちらも同様、キャッシュを利用しているためロード後に入力された値は出力に反映されない。以下は列のrenderオプションとbuttonsのexportOptionsを利用して入力された値を出力するサンプル。

$('#table1').DataTable({
    dom: 'Bfrtip',
    columns: [
        {
            // inputの値
            render: function (data, type, row, meta) {
                if (type === 'export') {
                    var input = $('<div>' + data + '</div>').find('input');
                    data = $('[name="' + input.attr("name") + '"]').val();
                }

                return data;
            }
        },
        {
            // selectのテキスト
            render: function (data, type, row, meta) {
                if (type === 'export') {
                    var input = $('<div>' + data + '</div>').find('select');
                    data = $('[name="' + input.attr("name") + '"] option:selected').text();
                }

                return data;
            }
        },
        {
            // チェックボックス・ラジオボタン
            render: function (data, type, row, meta) {
                if (type === 'export') {
                    var input = $('<div>' + data + '</div>').find('input');
                    data = $('[name="' + input.attr("name") + '"][value="' + input.attr("value") + '"]').prop('checked').toString();
                }

                return data;
            }
        }
    ],
    buttons: [{
        bom: true, // エクセルで文字化けしないようにbom付き
        extend: 'csv',
        exportOptions: {
            orthogonal: 'export'
        }
    }]
});

renderの引数、dataにはセルデータが入っているけど、これは前述の通り、ロード時にキャッシュされた古いデータ。なので取り出したinputのname属性をキーにして最新のinputを取得しなおす。