javascriptでソート出来る表を作る「Table Sorter」

テーブルで作った表を降順・昇順で並べ替えたい時には、Neil Fraserで公開されているTable Sorterでソートが簡単にできます。
注意：日本語ではソートできない模様です。
点数などの数値や、名前などをアルファベット表記にした項目を追加するなど工夫してください。

使用方法
まずtablesort.jsをhead内に挿入します。
次に、テーブルで作った表の項目部分を<thead></thead>で囲みます。
また、各項目にはlabelとしてcase、nocase、numのいずれかを書き込む必要があります。
メインの表は<tbody></tbody>内に書き込みます。

また表示される矢印と空白（↑'、 '↓'、' '）はオリジナル画像が使えます。
arrow-up.gif、arrow-down.gif、blank.gifの画像を作って以下のscriptを埋め込んでください。
<script type="text/javascript"><!--
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>

詳しくはjavascriptでソートが出来る表を作る紹介ページをご覧下さい。

2007年06月27日

前の記事：SEOってどういう仕組み？
次の記事：WYSIWYGを可能にするjavascript「openWYSIWYG」

関連記事

• [prototype]TableKit
• [mootools]DrasticData
• [mootools]A sorting table
• [jQuery]tablesorter
• [jQuery]Simple tableSorter

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」