指定した条件でテーブルの行を並び替える

jQuery plugin: Tablesorter 2.0 を使うと、指定した条件でテーブルの行を並び替えることができます。

次の例では、関東地方の都道府県を表すテーブルの行を並び替えるようにしています。ヘッダの列にある▼▲のアイコンをクリックすると、その列を昇順(または降順)で並び替わります。

jQuery(function($) {

$('#r4').tablesorter();

}); //jQuery

widgets プロパティに zebra を指定すると、1行間隔でテーブル行の背景色を入れ替わり表示できます。

jQuery(function($) {

$('#r4').tablesorter({
  widgets: ['zebra']
});

}); //jQuery

tr 要素のクラスに even と odd が交互に付与されるので、スタイルシートを使って even と odd の背景色を指定します。

table.tablesorter tbody tr.odd td {
  background-color:#F0F0F6;
}

sortList プロパティを使うと、テーブルをソートする初期条件を指定できます。sortList プロパティは、ソートする列とその並び順を配列で指定します。列は左を 0 とした数値を指定します。並び順は昇順を 0、降順を 1 で指定します。

次の例では、# 列を降順でソートしています。

jQuery(function($) {

$('#r4').tablesorter({
  widgets: ['zebra'],
  sortList: [[0, 1]]
});

}); //jQuery

headers プロパティを使うと、ソートを無効にする列を指定できます。headers プロパティは、ソートする列をキーに sorter プロパティを指定します。列は左を 0 とした数値を指定します。sorter プロパティを false にすると、その列のソートが無効になります。

次の例では、ふりがなの列のソートを無効にしています。

jQuery(function($) {

$('#r4').tablesorter({
  widgets: ['zebra'],
  sortList: [[0, 1]],
  headers: {
    3: {sorter:false}
  }
});

}); //jQuery