tablesorter.js

ダウンロード先

jquery.tablesorter.zipをダウンロードして解凍して使う。
自分はjquery.tablesorter.min.jsを使った。

使い方

「thead」と「tbody」を入れる必要あり。

html

<table id="hogehoge">
 <thead>
  <tr><th>名前</th><th>身長</th><tr>
 </thead>
 <tbody>
  <tr><td>スズキ</td><td>173</td></tr>
  <tr><td>サトウ</td><td>168</td></tr>
  <tr><td>サイトウ</td><td>175</td></tr>
 </tbody>
</table>

jQuery(単にソートしたい場合)

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

jQuery(指定した列のソートを無効)

$(function() {
  $('#hogehoge').tablesorter({
    //左から0番目の列のソートを無効にする。
    headers: {
      0: {sorter:false}
    }
  });
});

ソートマークのつけ方

tablesorterがクラスを追加してくれるので、それに合わせてCSSを設定している。

デフォルトの場合

<th class='tablesorter-header'>カラム名</th>

昇順の場合

<th class='tablesorter-header tablesorter-headerAsc'>カラム名</th>

降順の場合

<th class='tablesorter-header tablesorter-headerDesc'>カラム名</th>

css

.tablesorter-header div{
  margin-right: 20px;
}
.tablesorter-header{
  background-image: url(../img/asc_and_desc.gif);
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
}
.tablesorter-headerAsc{
  background-image: url(../img/asc.gif);
}
.tablesorter-headerDesc{
  background-image: url(../img/desc.gif);
}