テーブルにソート機能を簡単に実装する

テーブルを表示した時にソート機能を付けたいことはある程度あると思います。

そんなとき自分はそれぞれのフィールド毎にソート用のリンクを作成し、
GETでソートするフィールド名を渡してサーバ側でソートしなおした結果を
表示する。という方法をとってました。

しかし、jQueryだとそんなめんどーなことをやらずに簡単にソート機能を実現できます。

それが、「TableSorter」プラグインです。

以下から”jquery.tablesorter.zip”をダウンロードしてサーバにアップして回答してください。

http://tablesorter.com/docs/

回答して出てくる”jquery.tablesoter.min.js”というのを読み込んで使用します。
そのほかにもいろいろファイルやらフォルダやらでてきますが、ドキュメントだったり
サンプルだったりするので参考にするとよいと思います。

以下は簡単な使用例になります。







$(function(){
        $('#sorter').tablesorter();
});




row1 row2 row3 row4
test1-1 test3-2 test3-3 test3-4
test2-1 test2-2 test2-3 test1-4
test3-1 test1-2 test1-3 test2-4

ここで注意すべき点はtheadタグを付け忘れるとうまくいかない可能性があるので忘れないこと。
それと、先頭行のtheadタグの中身はthタグでなくてはいけないこと。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>