tablesorterで単位付きカンマ区切りの列をソートする

Tweet

Category JavaScript, jQueryPlugin 2019/04/12

問題

jQueryのプラグインのtablesorterで、カンマ区切りの数値と単位の入った列を数値順でソートさせたいんですけど、辞書順になっているみたいです。

どうしたらよいですか。

答え

tablesorter は jQuery.tablesorter.addParser でソートをカスタマイズできる。

「￥1,234,567」形式の文字列を数値として解釈させるには以下のようにすると可能。

jQuery.tablesorter.addParser({
  id: "fancyNumber",
  is: function(s) {
    return /^￥[0-9]?[0-9,\.]*$/.test(s);
  },
  format: function(s) {
    return jQuery.tablesorter.formatFloat( s.replace(/,/g,'').replace(/￥/g,'') );
  },
  type: "numeric"
});

• id … 一意の名前を付与
• is … 自動判別のための関数（trueを返せば適用）
• format … ソート前に値を正規化するために使用
• type … “text”としてソートするか、”numeric”としてソートするか指定する

メモ

デフォルトで対応可能な形式が多数あるので、なるべくそれに合わせると楽でしょう。

例）
・通貨形式に対応している。$ や £、€、¥ なら大丈夫。全角の￥を使うと文字列としてソートされるので¥を使うとよい。後ろに「円」をつけたい場合はparserを自作する必要あり
・単純なカンマ区切りは数値としてソートしてくれる。
・パーセント。 123.45% の形式も数値としてソートしてくれる。
・2019-04-05、2019/05/06 形式の日付。
・12:34 形式の時間。

下の図にみられる形式のデータには最初から対応している。

参考

https://mottie.github.io/tablesorter/docs/example-parsers.html