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

Check このエントリーをはてなブックマークに追加

配布元：Table sorting JavaScript
ライセンス：MIT license

バグ修正&日本語対応版
配布元：to-R[とあるWebクリエイターのblog]

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;

サンプル

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

スポンサードリンク

コメント

カテゴリー：テーブル ライブラリ