並び替えできるテーブルであることをリンクで伝える方法

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

jQuery plugin: Tablesorter 2.0 は Blue Skin - Images and CSS styles for blue themed headers (as seen in the examples) というスタイルシートを提供しているので、すぐに見栄えのよい並べ替えできるテーブルを実現できます。

次の例でもこのスタイルシートを使っています。ヘッダの列にある▼▲のアイコンをクリックすると、その列を昇順(または降順)で並び替わります。

ただし、現状のデザインだと、▼▲のアイコンの存在に気が付いて、そのアイコンをクリックしてみるまで、テーブルの行が並び替わることが伝わりません。これではせっかく導入したテーブルの並べ替えの効果が薄くなってしまいます。

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

次の例では、ヘッダの項目名を a 要素を使ってリンクにして、テーブルの列に対して何か操作ができることを明示しています。さらに、そのリンクに title 属性を付与して、該当の列で並び替えできることをツールチップを使って伝えています。

a 要素の href 属性や click イベントは指定してません。a 要素ではイベントを捕捉せず tablesorter が th 要素に仕掛けたイベントをそのまま使うようにしています。

<thead>
<tr>
<th><a title="都道府県コードで並び替え">#</a></th>
<th><a title="都道府県で並び替え">都道府県</a></th>
<th><a title="フリガナで並び替え">フリガナ</a></th>
<th><a title="ふりがなで並び替え">ふりがな</a></th>
<th><a title="ローマ字で並び替え">ローマ字</a></th>
</tr>
</thead>

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

並び替えできるテーブルであることをリンクで伝える方法

関連情報