テーブルに簡単にソート機能が付けられる「Table Sorter」-JavaScript Library Archive

テーブルに簡単にソート機能が付けられる「Table Sorter」

配布元:JavaScript Table Sorter
ライセンス:個人、商用利用可(サポートはなし)

Table Sorterは簡単にストライプテーブルやtableにソート機能を付けることができるJavaScriptライブラリです。

Table Sorterの使い方

Table Sorterのを利用するには、まず配布元からダウンロードしてきたファイルから、script.jsとstyle.cssをhead要素内などで読み込みます。

ファイル名が一般的なものなので、table_sorter_script.jsやtable_sorter_style.cssなどと改名したほうが使いやすいかもしれません。

<link rel="stylesheet" href="table_sorter_style.css" />
<script type="text/javascript" src="table_sorter_script.js"></script>

付属のスタイルシートでは「sortable」というクラス名でCSSの制御を行っていますので、table要素に「class=”sortable”」を追加します。任意のID属性(sampleではsorter)を付けます。

<table cellpadding="0" cellspacing="0" border="0" class="sortable" id="sorter">

body要素を閉じる直前に以下の記述を追加します。(sorterの箇所は任意のid属性)

<script type="text/javascript">
var sorter=new table.sorter("sorter");
sorter.init("sorter",1);
</script>

ソートをおこないたくない列のth要素にnosortというclass属性を追加しておくと、その列ではソートを行うことができません。

サンプル

試したところ2007/11/2などの日付データは上手にソートすることができません。

また、イベントの設定はonload記法を利用してJavaScriptファイル内に記述したほうがXHTMLソースがシンプルになりますね。

function addEvent(elm,listener,fn){
	try{
		elm.addEventListener(listener,fn,false);
	}catch(e){
		elm.attachEvent("on"+listener,fn);
	}
}
addEvent(window,"load",function(){
	sorter=new table.sorter("sorter");
	sorter.init("sorter",1);
})

スポンサードリンク

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

直前:プログラムのコードに色を付ける「google-code-prettify」

直後:IE6でhover,active,focus擬似要素を使う為の「csshover」

テーブルに簡単にソート機能が付けられる「Table Sorter」 JavaScript Library Archive