テーブルをソートできるようにするjsライブラリ-table sorting

table sortingはテーブルをソートできるようにするjsライブラリです。

テーブルの内容でソートしたり、奇数行、偶数行にそれぞれ異なるclassをつけたりが可能です。

設置方法

ダウンロードしたsortable.jsをhead要素内なので読み込みます。

<script type="text/javascript" src="sortable.js"></script>

ソートの対象のtable要素のclass属性をsortableに設定して、任意のID名をid属性につけます。

<table class="sortable" id="foo">

ソートの対象にしたくない列がある場合はth要素のclass属性にunsortableを設定します。

<th class="unsortable">

ソートの対象にしたくない行がある場合はtr要素のclass属性にsortbottomを設定します。
ただし、この行はソート後テーブルの一番下に配置されます。

<tr class="sortbottom">

テーブル内の奇数番目に出現するtr要素のclass属性にはeven、テーブル内の偶数番目に出現するtr要素のclass属性にはoddが付加されますので、行毎に色を変えることも可能です。

sortable.js内の12行目から17行目に設定する画像について設定する箇所があるので、ここでソートボタンを設定できます

var image_path = "http://www.joostdevalk.nl/code/sortable-table/";
var image_up = "arrow-up.gif";
var image_down = "arrow-down.gif";
var image_none = "arrow-none.gif";
var europeandate = true;
var alternate_row_colors = true;

サンプル

大きな表などに設定すれば可読性が向上するでしょう。

追記

ライブラリのバグ情報をいただいいます。
テーブルをソートできるようにするjsライブラリ table sorting をまともに使えるようにする

修正したバージョンも公開しております。
table sortingのバグとか直してみた

関連エントリー

画像に鏡面効果を与えるreflection.js
半角ｶﾅを全角カナに変換するjsライブラリ
ロールオーバーを簡単に実装する-Image Rollover Code-
ブロックレベル要素の高さを揃えるheightLine.js
クロスフェードを実装する為のCrossfader

スポンサードリンク

«CSS Nite in Osaka vol.7募集開始 | メイン | table sortingのバグとか直してみた»