Datatables で通貨文字やカンマを扱う

2018年7月1日2018年9月10日Java Script

jQuery プラグイン datatables を使えば、テーブル内の普通の数値だけでなく、カンマの入っている数字まで適切にソートされます。とくに何もしなくても大体うまく行きます。

通貨記号に対応しており ¥ や $ であれば、何もしなくてもOK。

例外としてヨーロッパなどのカンマとピリオドが逆の国の表記ではうまくいきませんが、lunguage で、decimal と thousands を入れ替えることで対応できます。

"language":  { "decimal" : ",", "thousands": "." }

しかし末尾に”円”がつくと、文字列と認識されてうまくソートされません。Datatbles であっても、文字列として認識されると数字としてはソートされないため対処が必要です。

文字列混じりの数字を適切に並べ替えさせる手順そのものはそれほど面倒ではありませんが、桁区切りのない数字に後からカンマと円を加えるほうが何かと便利なので、その方法も紹介します。

デフォルトのソート

デフォルトでは１列目の “￥" 記号と３列目のカンマなしは適切に並べ替えられます。しかし末尾に ”円” がついている２列目はうまくいかず、一番頭の数字で文字列としてソートされています。

※コードは不用なものを消しただけのほぼデフォルト状態。

<script>
jQuery(function($){
$('#my-table-1').DataTable( { info:false,paging:false,searching:false,order:[ 1 , 'desc' ], } );
});
</script>

これでは不便なので、末尾に円がついていてもきちんと動くようにします。

カンマ挿入＋末尾に円の列を適切にソートさせる

一般的な通貨記号なら自動で判別してくれますが、それ以外だと文字列として扱われてしまいます。円に限らず、文字列が混在していてうまくソートできないときは、プラグインの “currency" を使います。今回は CDN を利用します。

<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/plug-ins/1.10.6/sorting/currency.js"></script>

プラグインを読み込んだら、あとは数字として扱いたい列に 'type’ : 'currency’ を適用するだけです。ここでは２列目の「カンマ＋円」に適用させています。

<script>
jQuery(function($){
$('#my-table-2').DataTable({
info:false,paging:false,searching:false,order: [ 1 , 'desc' ],
columnDefs : [ { targets: 1 , ' type ' : 'currency' } ]
});
});
</script>

デフォルトでは一番頭の数字で揃っていたのが、こちらではきちんと数字順に並べ変わっています。

数字にカンマを挿入し、末尾に円を加える

円がついていても上のやりかたで並べ替えはできますが、普通の数値を入れておいて、後からカンマや円といった記号をつけるほうが何かと便利です。Datatables では、通貨や単位記号をつけ足すための機能として、ナンバーヘルパーが用意されています。

ナンバーヘルパーを用いると、3桁栗木のカンマと小数点以下が設定できます。さらに接頭辞（先頭につける文字）と接尾辞（最後に付け加える文字）を加えることもできます。

要するに、"3000″ という数字にカンマと円を末尾に加えて、"3,000円"と表示できるということです。

使い方は、ナンバーヘルパーのオプションを指定して、適用したい列を選ぶだけ。プラグインも必要ありません。

3列目にカンマを入れて円を付け加えるならこんな形。

columnDefs: [ { targets: 2 , render: $.fn.dataTable.render.number( ',' , '.' , 0 , '' , '円' ) } ]

$.fn.dataTable.render.number() のオプションは5つ

1. 1000区切りの記号〔’,’〕（必須）
2. 小数点区切り記号〔’.’〕（必須）
3. 小数点の第何位まで表示させるか〔整数なら 0〕（必須）
4. 前置記号〔オプションとなっていますが、接頭辞が不用でも空 " にしないと動かない〕（オプション）
5. 後置記号〔円をつけたいなら '円’〕（オプション）

2列目の文字列をソートできるようにした上で、3列目の数値にカンマと末尾に円を加えるコード

$('#my-table-3').DataTable({
info:false,paging:false,searching:false,order:[3,'desc'],
columnDefs: [{targets: 1, 'type': 'currency' } , { targets: 2, render: $.fn.dataTable.render.number( ',', '.', 0, '','円' )}]
});

3桁区切りのカンマを加えるだけなら１つめのカンマだけ入れれば事足ります。

columnDefs : [ { targets: 2 , render: $.fn.dataTable.render.number( ',' ) } ]

ヨーロッパなどの桁区切りが “." の国向けに表示させるなら、’.’ と ',’ を入れ替えます。