HTMLテーブルソートJavaScriptライブラリ
HTMLテーブルをJavaScriptでソートするAjaxライブラリを作成。
本ソートスクリプトの特徴としては和暦(明治～平成まで)や月日に2桁と1桁のものが混じっていてもソートしてくれます。また数字の書式も様々なものをサポートしています。ついでにCSS/スタイルシートはそのままに、マウスオーバー時の背景色変更もしてくれます。
元のCSSレイアウトを変更すること無しに、手軽にテーブルをソートさせたい場合にどうぞ。
特徴
- tableタグ以外にはidやclassの指定が不要
- idやclassのスタイルを変更しません。
- マウスポインタが上にある行の背景色も自動的に計算
- 日付や数値に書式が設定されていてもソート可能(サポート書式はdemoの通り)
- thead有り/無し両対応
- thead有りの場合は、theadの最終行が項目行として選択されます。
- このjs以外の外部ファイルは不要
- 特定のフレームワークに依存しません
デモ
| 書式1 | 書式2 | 書式3 | 書式4 | 書式5 |
|---|---|---|---|---|
| 1991/1/13 | 1991年1月13日 | 平成3年1月13日 | H3.1.13 | 1月13日 |
| 1921/12/13 | 1921年12月13日 | 大正10年12月13日 | T10.12.13 | 12月13日 |
| 2003/9/3 | 2003年9月3日 | 平成15年9月3日 | H15.9.3 | 9月3日 |
| 1975/11/3 | 1975年11月3日 | 昭和50年11月3日 | S50.11.3 | 11月3日 |
| 1978/10/4 | 1978年10月4日 | 昭和53年10月4日 | S53.10.4 | 10月4日 |
| 2005/7/20 | 2005年7月20日 | 平成17年7月20日 | H17.7.20 | 7月20日 |
| 1960/6/30 | 1960年6月30日 | 昭和35年6月30日 | S35.6.30 | 6月30日 |
| 2004/12/31 | 2004年12月31日 | 平成16年12月31日 | H16.12.31 | 12月31日 |
他のデモを見たい方は以下
ダウンロード
使い方
1.headタグでJavaScriptファイルを読み込みます。(ダウンロードしたjsファイルのバージョンを消してsorter.jsという名称で使用しているものとします。)
<script type="text/javascript" src="sorter.js" charset="utf-8"></script>
2.tableタグにidを設定します。(例ではsampleというidを設定)
<table id="sample">
3.tableの後に以下のjavascriptを記述します。
<script type="text/javascript">
var sample=new table.sorter("sample");
sample.init();
</script>
コンストラクタに与える文字列、インスタンス名などの計3箇所をid名で統一してください
メソッド仕様
- sorter(id, asc, desc)
- id: 文字列です。tableタグのidを渡します(必須)
- asc: 文字列です。昇順時に表示するhtml、タグも使用できます。
- desc: 文字列です。降順時に表示するhtml、タグも使用できます。
-
init(…)
可変引数です。
- ソートしない列を指定します。可変です。init(0,1,2)のように引き渡します。
WordPressでの使い方
add-css-jsプラグインを利用したWordPressでの組み込み方は以下のキャプチャを参考にしてください。ざっくり説明すると、jsファイルをjsfileカスタムフィールドで読み込み、printmetaショートコードでソートライブラリを動作させています。
ソートさせたいテーブルのid属性がdemo_no_theadの場合、カスタムフィールドの名前をtablesortにして以下のコードを値として入力します。
<script type="text/javascript">
var demo_no_thead=new table.sorter("demo_no_thead");
demo_no_thead.init();
</script>
本文のtableタグの終わりに以下のショートコードを加えます。
[printmeta name="tablesort"]
現存する問題点
- SafariやChromeなどのWebKitを使用するブラウザでは1列目を連続してソート出来ない問題があります。(2列目をソートすると元に戻る)
- addEventListenerやattachEventを使いonload時に動作させようとしたのですが、うまく動作しませんでした。(解決策求む)
ライセンス
いかなる制限も設けません。(商用も無料)
ただバグ報告や改良したらソースをもらえるor配布URLを教えて貰えるとうれしいです。
改定履歴
- 2009/09/02 v0.2.1->v0.2.2に変更
parseIntの引数を修正
最後に
ふっくんのブログっぽいサイトから記事を移行すると共にVerUPしました。
最後に元ネタとなったJavaScript Table Sorterの作者様に感謝。
あわせて読む
ブックマーク！
コメント投稿
RSSフィード
9件のコメント
お世話になります。
sorter.js を使わせていただいてるのですが、下記のソースのような場合、上手くソートされません(泣)。
何か設定方法とかあるのでしょうか？
よろしくお願いいたします。
table#sort {
border-left:#AAAAAA 1px solid;
border-top:#AAAAAA 1px solid;
font-size:90%;
border-collapse:collapse;
}
table#sort tr th,
table#sort tr td {
border-right:#AAAAAA 1px solid;
border-bottom:#AAAAAA 1px solid;
padding:4px 8px;
background-color:#ffffff;
color:#545454;
}
table#sort tr th {
background-color:#CCCCD5;
color:#333333;
}
問
日付１
日付２
2009/08/17
2009/08/19
2009/08/11
2009/08/19
2009/08/03
2009/07/23
//テーブルソート用
var sort = new table.sorter(’sort’);
sort.init();
申し訳ありませんが、テーブルのHTMLソースをメールか何かで送っていただけると助かります。
08が00と認識されるバグがあったようです。v0.2.2で修正しました。
送っていただいた新バージョンで、無事に動きました。
ご丁寧な対応、ありがとうございました。
お世話になります。
何種類かテーブルソートのJavaScriptを参考にさせていただいたのですが、
とりさんのソフト屋さんのライブラリがとても導入が簡単で使い易かったので使わせていただいております。
ソート順番で1点、日時の情報のソート時に期待した順番のとおりにソートされないようです。
テーブルのデータに、年月日時分秒が含まれる
2009/05/21 2:13:41 や
2009/05/21 12:4:16 等、
時分の表記に 2桁、1桁が混在するとソート時に
0:00⇒10:00⇒11:00･･･1:00⇒2:00･･･9:00 のような昇順、または降順になるようです。
日時のソートで 0時から24時までの昇順は出来ないでしょうか？
よろしくお願い致します。
ちと見てみます。
ただ、現在、他の仕事で手が離せないので、しばらくお待ちください（汗
お世話になっています。
ここで紹介されているテーブルソートスクリプトを
私の持っているデータ(400～600行程度)で利用してみました。
他のサイトで紹介されているスクリプトに比べて
さくさくと動き、非常に優れたものだと思っています。
(javascriptのことは全くの初心者ですが。。。すみません。)
私のホームページで利用させていただこうと思いますが
>SafariやChromeなどのWebKitを使用するブラウザでは1列目を連続してソート出来ない問題があります。(2列目をソートすると元に戻る)
このあたり、修正される予定はありますでしょうか？
宜しくお願いします。
今のところ修正する予定はありません。おそらくしてもかなり後になるだろうと思います。
申し訳ありませんがよろしくお願いします。
了解しました。
何かしら対策を考えて見ます。
お返事ありがとうございました。
ちなみに私も高校まで福井市に住んでいました。
応援しています。