SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
てるてる動画

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

問題

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"
});

メモ

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

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

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

tablesorter

参考

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

関連するメモ

コメント