tablesorter の sortList オプションでページ表示時の並び基準を指定

jQuery の tablesorter プラグインの「blue」テーマを使った、列の値を基準に、項目を並べ替えられる表（テーブル）において、ページを読み込んだとき、どの列を基準に並べるかを指定する方法。ページを読み込んだときの並び替え基準の指定には、「sortList」オプションを使う。

実装例（サンプル）

実装例（サンプル）の動作について

• ページ読み込み時（ページ表示時）、まず、「値段」を基準に昇順で並べ替え、次に、「評価」を基準に降順で並べ替え、最後に、「デザイン」を基準に降順で並べ替える。
• 表の列の見出し（「商品名」「ID」「値段」「評価」「デザイン」）をクリックすると、その列の値を基準に、商品を並べ替える。昇順の列は降順に並べ替え、降順の列は昇順に並べ替え、昇順でも降順でもない列は昇順に並べ替える。
• 列の見出しにある「」が、昇順で並べたときは「」に変わり、降順で並べたときは「」に変わる。
• 「値段」で並べ替えた後、キーボードの「Shift」キーを押したまま、「評価」をクリックすると、「値段」が同じ商品だけ、さらに「評価」を基準に並べ替える。この例の場合、8800円の商品3つを、さらに「評価」に基づいて並べ替える。
• 並べ替えの基準にした列の見出しの背景色は、　この色　に変わる。複数の列を基準にしたときは、複数の見出しの背景色が、　この色　に変わる。

実装例（サンプル）のソースコード

読み込み

パスは、それぞれ、アップロードした場所を指定する。

JavaScript

1. [ 2, 0 ]:3つ目の列を基準に昇順で並び替え。
2. [ 3, 1 ]:4つ目の列を基準に降順で並び替え。
3. [ 4, 1 ]:5つ目の列を基準に降順で並び替え。

CSS

HTML