jquery.tablesorter.jsで順序カラムをソートしない

tableタグで表示された表をソートするjQueryプラグインtablesorterはとても便利です。

jquery.tablesorter.js : http://tablesorter.com/docs/

WEBシステムを制作していると、こういった表を扱い機会が多く、また、顧客よりソートの要望が必ず出てきます。表データは大方がデータベース等から取り出すと思いますので、単純に考えるとORDER BYすれば良いのですが、余計なページ読込が発生します。

jquery.tablesorter.jsはページを再読込するのではなく、HTML上で完結するのでサーバーにもユーザーにも優しいですね。

基本的なサンプル

サンプル

$(document).ready(function() { 
  $("#myTable").tablesorter(); 
});

#myTableをテーブルに設定します。

    <table id="myTable"> 
      <thead> 
      <tr> 
        <th>お名前</th> 
        <th>都道府県</th> 
        <th>年齡</th> 
        <th>誕生日</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
        <td>山田</td> 
        <td>北海道</td> 
        <td>25</td> 
        <td>01/01</td> 
      </tr> 
      <tr> 
        <td>佐藤</td> 
        <td>東京都</td> 
        <td>42</td> 
        <td>02/01</td> 
      </tr> 
      <tr> 
        <td>鈴木</td> 
        <td>京都府</td> 
        <td>18</td> 
        <td>04/01</td> 
      </tr> 
      <tr> 
        <td>田中</td> 
        <td>沖縄県</td> 
        <td>42</td> 
        <td>03/01</td> 
      </tr> 
      </tbody> 
    </table>

なお、クリックした項目タイトルの背景色を変更するCSSは以下のような感じです。

#myTable th{
  cursor: pointer;
  background: #E6E6E6;
}
#myTable th.headerSortUp {
  background: #FFF09E;
}
#myTable th.headerSortDown {
  background: #D1DF9C;
}

ここまでではあちこちで紹介されていますが、今回お客様からご相談があったのは、表の左端に連番を表示し、かつ、どの項目でソートしても連番はソートしたくないというものでした。

表の連番はソートせず、常に連番として表示させる

サンプル

公式サイトを読んでもそういった機能は無さそう（或いは英文なので読み切れてない）なので、思案した結果、ソートの度にNo.を連番で書き換えるという事にしました。ただ、THをクリックした際にon clickイベントが発火してくれないようなので、jquery.tablesorter.jsに書き加える事にしました。

jquery.tablesorter.js (715行目付近)

// apply event handling to headers
// this is to big, perhaps break it out?
$headers.click(        
  function (e) {
  //studio key -----------                
    setTimeout(function(){
      var n=1;
      $(".th_number").each(function(){
        var num = ( '00000' + n ).slice( -3 );
        $(this).text(num);
        n++;
      });
    },100);
  //studio key -----------

連番のカラムを以下にようにします。

<td class="th_number">001</td>

$headers.clickがtablesorterのイベント発生箇所なので、そこでth_numberを書き換える処理を加えました。また、イベント発生と同時だと連番付けが発火出来ない、或いは打ち消される？ようなので、setTimeoutで0.1秒遅らせています。

こういった要望は少ないかもしれませんが、参考程度に。