最近お世話になったjQueryのライブラリTableSorterのご紹介。
tableを動的に生成しているページやtableの行数が多いときに便利なのがTableSorterです。

使い方は簡単！！

1. GitHubからTableSorterをダウンロード
2. jquery.tablesorter.min.jsをheadで読み込む
3. ソート機能を使いたいtableにidを振る
4. jsにtablesorter()を記述する

 

まずTableSorterをダウンロードしましょう。

 

ダウンロードしたjquery.tablesorter.min.jsをheadで読み込みます。

<script type="text/javascript" src="js/rellax.min.js">

 

次にtableタグにidを振ります。(今回はmyTableとしておきます)

 

tableの構造はこんな感じ

<table id="myTable">
  <thead>
    <tr>
      <th>ID</th>
      <th>NAME</th>
      <th>MAIL</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>馬山馬太郎</td>
      <td>uma@uma.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>鹿山鹿次郎</td>
      <td>sika@sika.com</td>
    </tr>
    <tr>
      <td>3</td>
      <td>猫山猫三郎</td>
      <td>neko@neko.com</td>
    </tr>
  </tbody>
</table>

 ※テーブルは必ずこの構造にしてください！tdとthを間違えていたり、theadが無かったりすると動いてくれません。
　trやthやtdの項目の数はもちろんいくつでもおｋです。

 

最後にjsに以下を追加します。

$(function() {
  $('#myTable').tablesorter();
});

 

これだけでソート機能が使えます。

簡単！！