Table Sorterを試してみた。
必要なのは、jsのライブラリと画像3枚
tablesort.js
blank.gif
arrow-up.gif
arrow-down.gif
これらの読み込みのために以下の記述を行う。
<SCRIPT LANGUAGE='JavaScript1.2' SRC='tablesort.js'></SCRIPT> <SCRIPT LANGUAGE='JavaScript1.2'><!-- TableSort.arrowNone = " <IMG HEIGHT=10 WIDTH=10 SRC='blank.gif' ALT=''>"; TableSort.arrowUp = " <IMG HEIGHT=10 WIDTH=10 SRC='arrow-up.gif' ALT='↑'>"; TableSort.arrowDown = " <IMG HEIGHT=10 WIDTH=10 SRC='arrow-down.gif' ALT='↓'>"; //--></SCRIPT>
あとソートテーブルのヘッダー部分はが必要みたい。 'LABEL=case' あとはhttp://neil.fraser.name/software/tablesort/を見れば分かるかと。 サンプルそのものは上手くいかない、文字のエンコードの問題? http://fromaffili.blog22.fc2.com/blog-entry-57.html あとは、サンプルに含まれている画像ファイル example.css を利用したりする感じ。 もとのページはここ。 ここのやつ と を設定する。 cssの方はなくてもよい。 ソートしたところの背景色が変わる。
またのの部分に以下のうちの一つのラベルを設定するとソートできるようになる。
'LABEL=nocase'
'LABEL=num'
Table sorting JavaScriptを試してみた。
に書いてあるように
http://blog.webcreativepark.net/2007/09/26-024416.html
の
sortable_ja.jsを利用する。
arrow-down.gif
arrow-none.gif
arrow-up.gif
を使ったり、画像の配置場所はjsに記述されているみたい。
に書いてあるa img {
border: 0;
}
http://yoast.com/articles/sortable-table/javascript「Table-Sort」を試してみる
http://www.skuare.net/test/mooSorter.html<script src="http://www.skuare.net/test/js/mootools.js" type="text/javascript"></script>
<script src="http://www.skuare.net/test/js/table-sort.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
new SortableTable($('sorttabletest'));
});
</script>
#sorttabletest {font-size:90%;}
#sorttabletest caption {text-align:left;}
#sorttabletest th, td {border: 1px solid #EEE;padding:5px;}
#sorttabletest th {font-weight:bold;background:right no-repeat;padding-right:20px;}
#sorttabletest td {text-align:right;}
#sorttabletest td.lft {text-align:left;}
#sorttabletest th.primary {background-color:#B5D4FE;}
#sorttabletest th.secondary {background-color:#CFE7FF;}