HTML 要素を含む列でテーブルの行を並び替える

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

jQuery plugin: Tablesorter 2.0 は、テーブルの値に HTML 要素が含まれていても、自動的に、半自動的に、もしくは指定したルールにしたがって、テーブルをソートできる柔軟性を備えています。

次の例では、都道府県の値に a 要素を含むテーブルも期待どおり並べ替わることを確認できます。このとき tablesorter は a 要素の innerHTML プロパティの値で並び替えています。

<tr>
<td>08</td>
<td><a href="#08">茨城県</a></td>
<td>イバラキケン</td>
<td>いばらきけん</td>
<td>ibaraki</td>
</tr>

jQuery(function($) {

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

}); //jQuery

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

次の例では、都道府県の値に span と a の 複数の要素を含む テーブルは、期待どおり並べ替わらないことを確認できます。このとき tablesorter は span 要素の innerHTML プロパティの値で並べ替えています。

<tbody>
<tr>
<td>08</td>
<td><span><a href="#08">茨城県</a></span></td>
<td>イバラキケン</td>
<td>いばらきけん</td>
<td>ibaraki</td>
</tr>

jQuery(function($) {

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

}); //jQuery

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

複数の要素を含む テーブルを並べ替えるときは textExtraction プロパティを使います。

次の例では、textExtraction プロパティに complex を指定して、要素のテキストを使って並べ替えています。このとき tablesorter は jQuery.text メソッドを使って td 要素のテキストを取得し、そのテキストで並べ替えています。

tablesorter の textExtraction を使ったデモでは、textExtraction プロパティに function を指定して、並べ替えのテキストを決定していますが、要素のテキストを使うだけなら textExtraction プロパティに complex を指定するだけでよいです。なお、ここでは complex を指定していますが、実際は function 以外かつ simple 以外を指定しても同様の振る舞いをします。

jQuery(function($) {

var r = $('#r3').tablesorter({
  widgets: ['zebra'],
  textExtraction: 'complex'
});

}); //jQuery

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

HTML 要素を含む列でテーブルの行を並び替える

関連情報