如何在总和数据表中包含货币格式
Posted
技术标签:
【中文标题】如何在总和数据表中包含货币格式【英文标题】：How to include currency format in sum datatable 【发布时间】：2021-11-13 18:45:01 【问题描述】：我有这个数据表，我想对列求和并在页脚中添加货币格式的结果。总和工作正常，但我不知道如何在总数中添加货币格式。 你能帮帮我吗？
footerCallback: function( tfoot, data, start, end, display )
var api = this.api();
$(api.column(5).footer()).html(
api.column(5).data().reduce(function ( a, b )
return a + b;
, 0)
);
$(api.column(6).footer()).html(
api.column(6).data().reduce(function ( a, b )
return a + b;
, 0)
);
$(api.column(7).footer()).html(
api.column(7).data().reduce(function ( a, b )
return a + b;
, 0)
);
var col8 = $(api.column(8).footer()).html(
api.column(8).data().reduce(function ( a, b )
return a + b;
, 0)
);
,
【问题讨论】：
【参考方案1】：您可以进行以下更改以将列总和显示为货币金额：
将reduce 函数分配给一个单独的变量。
使用 javascript Intl.NumberFormat() 函数将总和格式化为货币。
（可选步骤）为每一列创建一个通用函数，以避免多次重复相同的代码。
对于单个列，步骤 1 和 2 如下所示：
footerCallback: function( tfoot, data, start, end, display )
var api = this.api();
var sum = api.column(1).data().reduce(function ( a, b )
return a + b;
, 0);
var amount = Intl.NumberFormat('en-US', style: 'currency', currency: 'USD').format(sum);
$(api.column(1).footer()).html(amount);
您显然可以将USD 货币代码更改为您喜欢的任何货币格式。
对于第 3 步，有不同的方法。
这是一种方法：我们从一个包含列索引的数组开始，我们要在其中显示总和。就我而言，这是[1, 2]。每个值都传递给一个函数doSum()：
var dataSet = [
"id": "1",
"amount_a": 1,
"amount_b": 12.34
,
"id": "2",
"amount_a": 3,
"amount_b": 456.78
,
"id": "3",
"amount_a": 5,
"amount_b": 678.90
,
"id": "4",
"amount_a": 2,
"amount_b": 32.21
,
"id": "5",
"amount_a": 3,
"amount_b": 1.12
,
"id": "6",
"amount_a": 1,
"amount_b": 2.23
,
"id": "7",
"amount_a": 4,
"amount_b": 3.34
];
$(document).ready(function()
var table = $('#example').DataTable(
data: dataSet,
columns: [
title: "ID", data: "id" ,
title: "Amount A", data: "amount_a" ,
title: "Amount B", data: "amount_b"
],
footerCallback: function( tfoot, data, start, end, display )
var api = this.api();
[1, 2].forEach( function( colIdx )
doSum( api.column(colIdx) );
);
);
function doSum(col)
var sum = col.data().reduce(function ( a, b )
return a + b;
, 0);
var amount = Intl.NumberFormat('en-US', style: 'currency', currency: 'USD').format(sum);
$(col.footer()).html(amount);
);<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<tfoot>
<th style="text-align: right;">Totals:</th><th></th><th></th>
</tfoot>
</table>
</div>
</body>
</html>【讨论】：
完美运行。谢谢！ 不客气。你上过网站tour吗？如果你还没有，我强烈推荐它。以上是关于如何在总和数据表中包含货币格式的主要内容，如果未能解决你的问题，请参考以下文章