並び替え可能なtableを簡単に実装!jQueryプラグイン「DataTables」

tableの内容をJavaScriptで動的に並び替える方法をご紹介します。

 

dataTables.jsのダウンロード

今回は、表示数制御、検索機能を兼ね備えたdataTables.jsを使用します。
以下のURLからダウンロードをしてください。
http://www.datatables.net/download/

こちらはjQueryでのプラグインになりますので、
jQueryをお持ちでない方はダウンロードしてください。

 

htmlを記述

<thead>と<tbody>を省略せずに必ず記述してください。

 

JavaScriptをセット

以下にように記述してください。
今回は、「sample」というclass名がついたtableに適応させる例となっています。

以上になります。

 

サンプル

以下にアップしました。
http://www.actzero.jp/sample/20121210/

 

オプション

指定できるオプションもかなり充実していて、
ここで一部紹介します。

//ソートのon/off
“bSort”: false

//ページinfoのon/off
“bInfo”: false

//ページ送りのon/off
“bPaginate”: false

//ソート順を記録
“bStateSave”: true

その他公式サイトでご確認ください。
http://datatables.net/examples/basic_init/zero_config.html

 

dataTables.jsは簡単に導入出来る割にかなりリッチに使えるので、オススメです!