JQueryUIのtablesorterについてのメモ

tablesorterのソート順について

tablesorterのソート順について、実際に動作させてみた感じをメモ。
細かな用語等モロモロについては以下参照。
https://mottie.github.io/tablesorter/docs/

デフォルト動作

デフォルト設定

     $("table").tablesorter({
        headers:{
            0: { sorter: true },
            1: { sorter: true },
            2: { sorter: false }
        },
    }).tablesorterPager(pagerOptions);//option設定は割愛

1. ソート対象カラムの1つ目のデータが数字のみの場合、数値文字（digit）として扱う。数字以外を含む場合文字（text）として扱う。
   （おそらく初期化時（画面描画時）に一度だけ判定）
2. 対象カラムをクリック
   ・文字扱いの場合、naturalSortでソートする。
   ・数値扱いの場合、numericSortでソートする。

パーサを指定

デフォルト設定

     $("table").tablesorter({
        headers:{
            0: { sorter: "digit" },
            1: { sorter: "text" },
            2: { sorter: false }
        },
    }).tablesorterPager(pagerOptions);//option設定は割愛

1. 上記のように"digit"や"text"を指定。
   →1つ目のデータがどんな値でも指定した文字として扱う。
2. 対象カラムをクリック
   ・headersに指定した文字種でソートを行う。

文字ソートを任意のソートにする

デフォルト設定

     $("table").tablesorter({
        headers:{
            0: { sorter: true },
            1: { sorter: true },
            2: { sorter: true }
        },
        textSorter:{
            0: function(a, b, direction, columnIndex, table){return a.localeCompare(b);},
            1: $.tablesorter.sortText,
            3: $.tablesorter.sortNatural,
        },
    }).tablesorterPager(pagerOptions);//option設定は割愛

1. 上記のようにtextSorterプロパティに任意のfunctionや規定のfunctionを指定する。
2. 対象カラムをクリック
   ・判定の結果文字（text）扱いの場合、上記で設定したfunctionを用いてソートする。
   ・判定の結果数値（digit）扱いの場合、numericSortでソートする。
   （パーサを指定の場合、パーサが"text"の場合は必ずtextSorterの設定に従ってソートする）

数値ソートを任意のソートにする

デフォルト設定

     $("table").tablesorter({
        headers:{
            0: { sorter: true },
            1: { sorter: true },
            2: { sorter: false }
        },
        numberSorter:{
            0: function(a, b, direction, maxColumnValue){return a - b;},
            1: function(a, b, direction, maxColumnValue){return a - b;},
        },
    }).tablesorterPager(pagerOptions);//option設定は割愛

1. 上記のようにnumberSorterプロパティに任意のfunctionや規定のfunctionを指定する。
2. 対象カラムをクリック
   ・判定の結果文字（text）扱いの場合、naturalSortでソートする。
   ・判定の結果数値（digit）扱いの場合、上記で設定したfunctionを用いてソートする。
   （パーサを指定の場合、パーサが"digit"の場合は必ずnumberSorterの設定に従ってソートする）

その他設定について

以下のような設定をすると便利と思った。

便利な設定

     $("table").tablesorter({
        widgets: ['zebra', 'saveSort'],
        widgetOptions : {storage_useSessionStorage : true},
        headers:{
            0: { sorter: true },
            1: { sorter: true },
            2: { sorter: false }
        },
        emptyTo : 'emptyMin',
    }).tablesorterPager(pagerOptions);//option設定は割愛

widgetsの"zebra"はテーブルの行を奇数行、偶数行で自動で色を分けてくれる。
widgetsの"saveSort"はソートした列とソート順をページ毎に記憶してくれる機能。
widgetOptionsの"storage_useSessionStorage"はwidgetsの"saveSort"と併用する。ソート順の記憶をセッションストレージに保存するようにする。
指定がない場合はローカルストレージに保存。（ローカルストレージはローカルの物理ファイルに保存するらしい）
emptyToプロパティはデータなし（空文字）のセルの扱いを指定する。emptyMinはデータなしセルを最小として扱う。（昇順ソートでデータなしセルが最初にくる）