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

ホーム > Postal Search Ajax API with jQuery > tablesorter

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

選択した列でテーブルの行を昇順ソートする

trigger メソッドに sorton イベントを指定すると、指定した列と並び順でテーブルの行をソートできます。trigger メソッドの第2引数として sortList プロパティと同じ値を指定します。

次の例では、並べ替えボタンをクリックすると、選択ボックスで指定した列で、テーブルの行を昇順ソートします。

jQuery(function($) {

var r = $('#r1').tablesorter({
  widgets: ['zebra']
});

$('#b1').click(function() {
  r.trigger('sorton', [ [[$('#s1').val(), 0]] ]);
});

}); //jQuery

#	都道府県	フリガナ	ふりがな	ローマ字
08	茨城県	イバラキケン	いばらきけん	ibaraki
09	栃木県	トチギケン	とちぎけん	tochigi
10	群馬県	グンマケン	ぐんまけん	gunma
11	埼玉県	サイタマケン	さいたまけん	saitama
12	千葉県	チバケン	ちばけん	chiba
13	東京都	トウキョウト	いばらきけん	ibaraki
14	神奈川県	カナガワケン	かながわけん	kanagawa

選択した列でテーブルの行を降順ソートする

次の例では、選択ボックスで指定した列で、テーブルの行を降順ソートします。

jQuery(function($) {

var r = $('#r2').tablesorter({
  widgets: ['zebra']
});

$('#s2').change(function() {
  r.trigger('sorton', [ [[this.value, 1]] ]);
});

}); //jQuery

並び替え

#	都道府県	フリガナ	ふりがな	ローマ字
08	茨城県	イバラキケン	いばらきけん	ibaraki
09	栃木県	トチギケン	とちぎけん	tochigi
10	群馬県	グンマケン	ぐんまけん	gunma
11	埼玉県	サイタマケン	さいたまけん	saitama
12	千葉県	チバケン	ちばけん	chiba
13	東京都	トウキョウト	いばらきけん	ibaraki
14	神奈川県	カナガワケン	かながわけん	kanagawa

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

選択した列でテーブルの行を昇順ソートする

選択した列でテーブルの行を降順ソートする

関連情報