はじめに
以下のサイトを参考に、jQueryのプラグインである、ソート用ライブラリtablesorterを試してみました。
tablesorterを動かしてみる
- Download jQuery | jQueryからjQuery (1.2.1以上)をダウンロードします。
- The website is currently not availableからjquery.tablesorter.min.jsをダウンロードします。
サンプルコード
ダウンロードしたライブラリは、jsディレクトリに格納する。重要なのは、テーブルにidをつけておくことと、theadタグとtbodyダグを設定してやること。
<html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script> <script type="text/javascript" src="hoge.js"></script> </head> <body> <table id="booklist" border="1"> <thead> <tr><th>数字</th><th>漢字</th><th>カタカナ</th><th>ひらがな</th><th>英字</th></tr> </thead> <tbody> <tr> <td>1</td> <td>安部</td> <td>アベ</td> <td>あべ</td> <td>abe</td> </tr> <tr> <td>2</td> <td>石井</td> <td>イシイ</td> <td>いしい</td> <td>ishii</td> </tr> <tr> <td>3</td> <td>宇多田</td> <td>ウタダ</td> <td>うただ</td> <td>utada</td> </tr> <tr> <td>4</td> <td>江藤</td> <td>エトウ</td> <td>えとう</td> <td>etoh</td> </tr> <tr> <td>5</td> <td>小野</td> <td>オノ</td> <td>おの</td> <td>ono</td> </tr> </tbody> </table> </body> </html>
hoge.js
$(function() { $("#booklist").tablesorter(); });
おわりに
さすがに1行でっていうのは厳しいけど、ライブラリを読み込ませるだけで、ひらがなもカタカナも問題なくソートされます。これは使えると思います。