jQuery.tablesorterでテーブルを並べ替える場合の注意

テーブル並び替えのJSはたくさんありますが、jQuery.tablesorter が簡単に使えて良さそうです。

これの注意点です。

Ajaxで動的にテーブルのデータを追加するようなとき、最初に空のテーブルに対して

$('#table').tablesorter();

を実行して、あとで要素を追加したくなりますが、これだと上手くソートされません。
初期化時に、データを見て並び替えアルゴリズムを判定しているようです。

必ず、データが1件以上あるテーブルに対して初期化しましょう。

ということで、データ追加時に tablesorter() を実行することになりますが、2回以上これを実行すると、クリック時に複数回ソートが行われてしまいます。
2回登録してあると、「昇順→降順」が一瞬で行われ、実質ソートの切り替えができなくなってしまいます。

destroy系の関数が用意されていないので、手動でイベントを削除するのが良いですね。

$('#table th').unbind();
$('#table').tablesorter();