jQuery
tablesorter
jqueryUI

JQueryUIのtablesorterについてのメモ

More than 1 year has passed since last update.

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はデータなしセルを最小として扱う。(昇順ソートでデータなしセルが最初にくる)