小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


テーブルをソート可能にするライブラリTableSorterを試してみた。

はじめに

以下のサイトを参考に、jQueryのプラグインである、ソート用ライブラリtablesorterを試してみました。

tablesorterを動かしてみる
  1. Download jQuery | jQueryからjQuery (1.2.1以上)をダウンロードします。
  2. 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行でっていうのは厳しいけど、ライブラリを読み込ませるだけで、ひらがなもカタカナも問題なくソートされます。これは使えると思います。