通勤ノート

片道1時間の通勤時間がもったいないので、備忘録などを。

jQuery dataTablesでtextbox列もソートする

一覧表table内の入力欄としてtextboxを使用しているときに、その列はソートが効かない。そんなときはtextboxの中身でソートするように拡張してあげる。

拡張部分

ここのサンプルから抜粋。他にもセレクトボックスやチェックボックスのソートに関するサンプルもあります。
http://datatables.net/release-datatables/examples/plug-ins/dom_sort.html

$.fn.dataTableExt.afnSortData['dom-text'] = function (oSettings, iColumn) {
   return $.map(oSettings.oApi._fnGetTrNodes(oSettings), function (tr, i) {
       return $('td:eq(' + iColumn + ') input', tr).val();
   });
}

呼出し部分サンプル

対象のテーブルに全部で6列あり、3列目がtextboxの場合のサンプルです。

$('#example').dataTable({
    "aoColumns": [
        null,
        null,
        { "sSortDataType": "dom-text" },
        null,
        null,
        null
        ]
});