読者です 読者をやめる 読者になる 読者になる

tablesorter Ver2.1.2の使用方法

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>&#163;10,40</td><td>Koala</td><td>http://www.google.com</td></tr>
    <tr><td>abc 1</td><td>&#163;234,10</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
    <tr><td>abc 9</td><td>&#163;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>

これだけです。
簡単ですね☆