jQuery tablesorter 選択ボックスで指定した列でテーブルの行を並び替える

jQuery plugin: Tablesorter 2.0 は、テーブルのヘッダの列にある▼▲のアイコンをクリックする以外にも、リンクやフォームなど外側からのイベントを通じて、テーブルをソートすることもできます。

都道府県を表すテーブルを題材に、選択ボックスで指定した列でテーブルの行を昇順(または降順)ソートする方法をまとめてみました。

選択ボックスで指定した列でテーブルの行を並び替える

ソートの指示は jQuery.trigger メソッドから sorton イベントを指定する仕組みです。jQuery の標準イベントと同じように扱えるので、とても扱いやすい印象が残ります。

Ajaxデザインパターン ―ユーザビリティと開発効率の向上のために Michael Mahemoff 牧野 聡 by G-Tools