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

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

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

そこで、ヘッダの項目名をリンクにして、テーブルの列に対して何か操作ができることを明示して、並び替えのできるテーブルであることを伝える方法をまとめました。

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

小さな工夫がユーザビリティに大きな影響を与えるという実例でもあります。

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