JavaScript Table Sorter

当サイトのデモ／検証目次ページで採用している、ソート（並び替え）できるテーブルを実装するJavaScriptです。

名称
JavaScript Table Sorter
配布元
leigeber
必要なモジュール
無し
動作確認済みブラウザ
Mac：Firefox 3.5.7, Safari 4.0.4, Google Chrome, Opera 10.10
Win：IE 7, 8, Firefox 3.5.7, Safari 4.0.4, Google Chrome, Opera 10.10, IE 5, 6(IETester)
※日付のソートがうまく働きません。フォーマット（2010.01.15）に問題があるのでしょうか…日付のソートについてはこちらを参照してください（）
ライセンス
Creative Commons License

この他に以下の機能が追加されたバージョンが公開されています。

デモ

ダウンロード

sorter.zipをダウンロードし、解凍します。

設置方法

  1. 当サイトを例に説明します。
    [ルート]
　├ demo.htm　実装ページ
　└ [js]
　　　└ [sorter]
　　　　　├ [images]
　　　　　├ script.js
　　　　　└ style.css
  2. HEAD要素内に以下を記述します。 
    <link rel="stylesheet" href="js/sorter/style.css" />
<script type="text/javascript" src="js/sorter/script.js"></script>
  3. TABLE要素の開始タグに「class="sortable" id="sorter"」と記述します。 
    <table class="sortable" id="sorter" summary="デモの一覧。ソート可">
  4. TABLE要素の下に以下のスクリプトを記述します。 
    <script type="text/javascript">
	var sorter=new table.sorter("sorter");
	sorter.init("sorter",1);
</script>
  5. 「Summary」の列はソートさせたくないので、TH要素に「class="nosort"」と記述します。 
    <th class="nosort">Summery</th>
  6. また当サイトではstyle.cssも少し変更しています。

問題とその対処

最初、列が「Name」「Summary」「Category」「Language」「Frameworks」「UpDate」としていたときは問題なかったのですが、左に「no.」を追加すると、奇数行の背景色が無くなりました。

調べたところ、colissさんのブログのコメントに、「データにリンクがあり、エラーが発生する場合はscript.jsを変更する」との記述を見つけました。
元はスクリプト配布元のブログにあります。

script.jsの29～32行目

for(i=0;i<this.l;i++){
	this.a[i].o=i+1; var v=this.r[i+1].cells[y].firstChild;
	this.a[i].value=(v!=null)?v.nodeValue:”
}

を下記に変更します。

for(i=0;i<this.l;i++){
	this.a[i].o=i+1;
	var v=this.r[i+1].cells[y];
	while(v.hasChildNodes())v=v.firstChild;
	this.a[i].value=(v.nodeValue!=null)?v.nodeValue:''
}

これで問題なく表示されるようになりました。

ソートする列の初期値を変更するには

※ここでの変更は上記の「問題とその対処」を行わないと正常に動作しません。

デフォルトでは最初に読み込んだときは、2列目がソートされます。

この初期値は、TABLE要素の下の以下のスクリプトを書き換えることで変更できます。

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

例えば1列目をソートしたいときは、上記の値を「0」にします。3列目の場合は「2」となります。

なお初期設定でソートする列に「class="nosort"」と記述していてもソートされるようです。

セルの先頭が数字から始まるデータは、先頭から数字として認められる部分までを参照してソートします。

例えば、「2010/06/11」なら、「2010」までを使って並び替えるので、こちらの意図した通りに並び替えられません。

そこで、以下のようにスクリプトを修正すると、「/」（スラッシュ）で区切っても並び替えができるようになります。

script.jsの55行目

var i=parseFloat(f.replace(/(\$|\,)/g,'')),n=parseFloat(c.replace(/(\$|\,)/g,''));

を下記に変更します。

var i=parseFloat(f.replace(/(\$|\,|\/)/g,'')),n=parseFloat(c.replace(/(\$|\,|\/)/g,''));

デフォルトでは、並び替えるときに「$」（ドルマーク）と「,」（カンマ）を無視するようになっています。

この無視する文字列に「/」（スラッシュ）を追加しています。

※区切りを無視して比較するので「2010/6/11」と「2010/06/11」を比較すると「2,010,611」と「20,100,611」になり、最初の日付のほうが「小さい」と判断されます。月日が一桁の場合は、「0」を忘れないように入力してください。

逆順にソートする

テーブルの1行目の項目をクリックすれば、その項目の順番に並び、クリックする度に昇順（値の小さい順）、降順（値の大きい順）が切り替わります。

しかし、ページを読み込んだ時に表示される順番は常に昇順で、降順にするオプションはありません。

やや無理やりですがページを表示したときに、もう一度その列がクリックされたことにすれば降順として表示されます。

TABLE要素の下のスクリプトに以下のスクリプトを追加すると読み込んだときに降順で表示できます。

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

：公開

：「日付のソート」、「逆順にソートする」を追加

ページトップに戻る