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

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

これの注意点です。

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

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

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

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

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

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

$('#table th').unbind();
$('#table').tablesorter();
デザインも頼めるシステム開発会社をお探しならBPS株式会社までどうぞ 開発エンジニア積極採用中です! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

baba

ゆとりプログラマー。 高校時代から趣味でプログラミングを初め、そのままコードを書き続けて現在に至る。慶應義塾大学環境情報学部(SFC)卒業。BPS設立初期に在学中から参加している最古参メンバーの一人。Ruby on Rails、PHP、Androidアプリ、Windows/Macアプリ、超縦書の開発などを気まぐれにやる。軽度の資格マニアで、情報処理技術者試験(16区分17回 + 情報処理安全確保支援士試験)、技術士(情報工学部門)、Ruby Programmer Gold、AWSソリューションアーキテクト(アソシエイト)、日商簿記2級、漢検準1級などを保有。

babaの書いた記事

関連する記事

夏のTechRachoフェア2019

週刊Railsウォッチ

インフラ

ActiveSupport探訪シリーズ