TableSorterの自分用メモ

tableSorterの自分用メモです。

公式サイト
Version: 2.26

tablesorterが付与する属性data-column属性

th要素にdata-column属性が付与されます。data-column属性の値は、ソート対象の列番号を表しています。

ヘッダが結合されているテーブルに対してtablesorterを実行すると、正しくソートされないときがあります。この場合、data-column属性の値を確認して、ソート対象の列がずれていないか、確認してください。

結合されているヘッダに対してのheadersオプション

下記サイトを意訳します。
https://mottie.github.io/tablesorter/docs/#headers

Please note that the headers index values corresponds to the table header cells index (zero-based) and not the actual columns. For example, given the following table thead markup, the header-index counts the header th cells and does not actually match the data-column index when extra rows and/or colspan or rowspan are included in any of the header cells:

headersオプションのインデックスは、ヘッダのセルのインデックス(ゼロ始まり)に対応します。実際の列インデックスには対応しません。
たとえば、下記のテーブルヘッダの場合、ヘッダのインデックスはth要素のインデックスに対応します。複数行を持つ場合、または複数行を持ちヘッダセルにrowspan/colspanが使われている場合、data-columnのインデックスには対応しません。

<thead>
  <tr>
    <th colspan="4" data-column="0">header-index 0</th>
  </tr>
  <tr>
    <th data-column="0">header-index 1</th>
    <th data-column="1">header-index 2</th>
    <th data-column="2">header-index 3</th>
    <th data-column="3">header-index 4</th>
  </tr>
  <tr>
    <th colspan="2" data-column="0">header-index 5</th>
    <th colspan="2" data-column="2">header-index 6</th>
  </tr>
</thead>

So, in the above example, to disable the sort of the second table column (data-column index of 1), the header cell of index 2 needs to be set as follows: 2 : { sorter : false }.

つまり、上記の例で、2列目(data-column="1")のソート機能を無効にしたい場合、以下のようにヘッダセルのインデックス「2」を設定しなくてはなりません。

headers: {2: {sorter:false}}

headersオプションで、クラス名/IDを指定する方法

下記サイトを意訳します。
https://mottie.github.io/tablesorter/docs/#headers

In v2.17.0, you can reference the column(s) using a class name, id or column index.

v2.17.0では、クラス名、ID、または列番号で、列を指定することができます。

headers : {
    '.first-name' : { sorter: 'text' },
    '.disabled'   : { sorter: false }
}

[Warning] What won't work is if you try to target the header using a filtering selector that uses an index, e.g. "th:eq()", ":gt()", ":lt()", ":first", ":last", ":even" or ":odd", ":first-child", ":last-child", ":nth-child()", ":nth-last-child()", etc.

ヘッダに対して、インデックスを使うセレクタは、動きません。たとえば、th:eq(), :gt, :lt, :first, :last, :even, :odd, :first-child, :last-child, :nth-chidl(), nth-last-child()などです。

まとめ

以下のテーブルヘッダ(ヘッダが1行)に対して、

        <thead>
            <tr>
                <th class="disabled" data-column="0">header-index 0</th>
                <th class="disabled" data-column="1">header-index 1</th>
            </tr>
        </thead>

以下を実行すると、1列目、2列目のソートが無効になります。

   headers : {'.disabled' : { sorter: false }}

以下のテーブルヘッダ(ヘッダが2行)に対して、

  <thead>
            <tr>
                <th class="disabled" data-column="0">header-index 0</th>
                <th class="disabled" data-column="1">header-index 1</th>
            </tr>
            <tr>
                <th class="disabled" data-column="0">header-index 2</th>
                <th class="disabled" data-column="1">header-index 3</th>
            </tr>
</thead>

以下を実行すると、1行目の1列目、2列目はソートが無効になりますが、2行目の1列目、2列目は有効のままでした。

   headers : {'.first-name' : { sorter: 'text' }}

どうやら複数行ヘッダに対しては、クラス名指定はうまく動かないようです。