TableSorterの自分用メモ


tableSorterの自分用メモです。

[公式サイト](https://mottie.github.io/tablesorter/docs/#Demo)
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`のインデックスには対応しません。

```html
<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」を設定しなくてはなりません。

```js
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、または列番号で、列を指定することができます。

```js
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行)に対して、

```html
        <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行)に対して、

   ```html
  <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' }}
   ```

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