AKAI TSUKI

System development or Technical something

Tableのソート

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='&uarr;'>";
    TableSort.arrowDown = " <IMG HEIGHT=10 WIDTH=10 SRC='arrow-down.gif' ALT='&darr;'>";
  //--></SCRIPT>

あとソートテーブルのヘッダー部分はが必要みたい。
またのの部分に以下のうちの一つのラベルを設定するとソートできるようになる。

'LABEL=case'
'LABEL=nocase'
'LABEL=num'


あとはhttp://neil.fraser.name/software/tablesort/を見れば分かるかと。


Table sorting JavaScriptを試してみた。

サンプルそのものは上手くいかない、文字のエンコードの問題?

http://fromaffili.blog22.fc2.com/blog-entry-57.html
に書いてあるように
http://blog.webcreativepark.net/2007/09/26-024416.html

sortable_ja.jsを利用する。

あとは、サンプルに含まれている画像ファイル
arrow-down.gif
arrow-none.gif
arrow-up.gif
を使ったり、画像の配置場所はjsに記述されているみたい。

example.css
に書いてある

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;}

を設定する。

cssの方はなくてもよい。

ソートしたところの背景色が変わる。