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は簡単に導入出来る割にかなりリッチに使えるので、オススメです！