jQueryのDataTablesプラグインを使ってみた

プログラミング

DataTablesプラグインとは

tableタグを装飾してくれるjQueryプラグイン。
http://www.datatables.net/

他のtableタグを装飾してくれるプラグイン

ちなみに、これらを知った経緯は「jquery table」でググって出てきた
この記事を見たから。
http://www.designwalker.com/2009/09/jquery-table.html

どうしてこのプラグインを選んだか

サンプルプログラムやAPIなどがまとめられており、ドキュメントがしっかりしているから。
これに尽きる。
Flexigridは機能は良いが、ドキュメントが見つからなかったので使用をやめた。
Ingirdや他のプラグインは、ほしい機能が無かったので選ばなかった。

今回使った機能

  1. tableタグの装飾
  2. データのソート
  3. 表示件数を設定
  4. cookieを使ったソート順や表示件数の設定を保存
  5. データの選択
1. tableタグの装飾
$("#test_table").dataTable();
2. データのソート

これはデフォルトでオンに鳴っている。
オフにしたかったら

$("#test_table").dataTable({
"bSort": false
});

参考
http://www.datatables.net/examples/basic_init/filter_only.html

3. 表示件数を設定

これは、デフォルトでオンになっている。
オフにしたかったら

$("#test_table").dataTable({
"bLengthChange": false
});

表示件数の選択肢を増やしたい場合は
jquery.dataTables.jsの1330行目付近の

this.aLengthMenu = [ 10, 25, 50, 100];

が表示件数の選択肢にあたる。
つまり、選択肢に200をついかしたかったら、

this.aLengthMenu = [ 10, 25, 50, 100,
200
];

とするとよい。
全件を表示したかったら

-1

を追加

4. cookieを使ったソート順や表示件数の設定を保存
$("#test_table").dataTable({
"bStateSave": true
});

参考、というかまんま
http://www.datatables.net/examples/basic_init/state_save.html

5. データの選択

tableから、データをマウスで選択することができる。
サンプルプログラムでは選択されたデータに対して、任意のclass名を付けることができる。
参考　サンプルプログラム
http://datatables.net/examples/api/select_single_row.html

まとめ

DataTablesはドキュメントもしっかりしており、非常にありがたい。