tablesorter の headers オプションで一部の列の並べ替えを無効に

jQuery の tablesorter プラグインの「blue」テーマを使った、列の値を基準に、項目を並べ替えられる表（テーブル）において、一部の列の並べ替えはできないようにする方法。一部の列の並べ替えを無効にするには、「headers」オプションを使い、特定の列に対して、「sorter: false」を指定する。

実装例（サンプル）

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

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

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

読み込み

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

JavaScript

1つ目と2つ目の列による並べ替えを無効に設定。

CSS

HTML