小数点以下の桁数を指定する設定がないので formatter で関数を定義します。
formatter:"money"の場合、小数点以下の桁数指定は formatterParams.precision で行います。
今回作成した関数も formatterParams.precision を参照するようにします。
なお、bottomCalc は bottomCalcParams.precision で小数点以下の桁指定ができます。
/*
* 第二引数にformatterParamsの値が与えられる
*/
var disp_fixed=function(cell,formatterParams){
var val = cell.getValue();
if(typeof val==='number'){ // 対象は数値
var precision = formatterParams.precision; // 桁指定
if(precision>=0) return val.toFixed(precision);
}
return val;
}
以下、カラム定義、データ定義、実行結果、サンプルコードです。
カラム定義
{
title:"数値",
field:"number",
align:"right",
formatter:disp_fixed,
formatterParams:{precision:2},
bottomCalc:"sum",
bottomCalcParams:{precision:2}
}
データ定義
{number:10.123},
{number:12345.12345},
{number:0},
{number:undefined},
{number:null},
{number:NaN},
{number:"string"},
実行結果
サンプルコード
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link href="https://unpkg.com/tabulator-tables@4.4.3/dist/css/tabulator.min.css" rel="stylesheet">
<!script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.4.3/dist/js/tabulator.js"></script>
</head>
<body onload="show_table()">
<h1 id=title>小数点以下の桁数を指定する</h1>
<div id="table"></div>
<script type="text/javascript">
/*
* 第二引数にformatterParamsの値が与えられる
*/
var disp_fixed=function(cell,formatterParams){
var val = cell.getValue();
if(typeof val==='number'){ // 対象は数値
var precision = formatterParams.precision; // 桁指定
if(precision>=0) return val.toFixed(precision);
}
return val;
}
var show_table=function(){
var tdata = [
{number:10.123},
{number:12345.12345},
{number:0},
{number:undefined},
{number:null},
{number:NaN},
{number:"string"},
]
new Tabulator("#table", {
data:tdata,
columns:[
{
title:"数値",
field:"number",
align:"right",
formatter:disp_fixed,
formatterParams:{precision:2},
bottomCalc:"sum",
bottomCalcParams:{precision:2}
}
],
});
}
</script>