Webサイトでhtmlのtableを使用する際にカラムでのソートを行いたかったので、tablesorterを使用させていただきました。
http://mottie.github.com/tablesorter/docs/
tablesorterの最新Verは2.1.2(2012/3/15現在)なのですが、使い方を書いているサイトさんが軒並みVer2.0で、しかもそのVer2.0が現在ダウンロード出来ない状況になっていたのであせりました。
まぁ、普通にデモのやつをそのまま書いたら出来ました。
以下、説明。
tableのclassにtablesoterを指定する意外は普通にtableを作成する。
<table class="tablesorter"> <thead> <tr> <th>AlphaNumeric Sort</th> <th>Currency</th> <th>Alphabetical</th> <th>Sites</th> </tr> </thead> <tbody> <tr><td>abc 123</td><td>£10,40</td><td>Koala</td><td>http://www.google.com</td></tr> <tr><td>abc 1</td><td>£234,10</td><td>Ox</td><td>http://www.yahoo.com</td></tr> <tr><td>abc 9</td><td>£10,33</td><td>Girafee</td><td>http://www.facebook.com</td></tr> </tbody> </talbe>
次に、scriptおよびcssを読み込ませる。
<link href="css/blue/style.css" rel="stylesheet"> <script src="js/jquery.tablesorter.min.js"></script> <script src="js/jquery.tablesorter.widgets.js"></script> <script> $(function(){ $('table').tablesorter({ widgets : ['zebra', 'columns'], sortReset : true }); }); </script>
これだけです。
簡単ですね☆