javascript 数据表列中的逗号和 $
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13280817/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Commas and $ in datatable columns
提问by user1165952
I have a datatable with 4 columns that hold currency. Currently I'm treating them as normal columns and manually appending '$' to each value. Now I need to format the column to have commas as well. Is there any plug-in to do this? I also want to remove the manual addition of '$' value. I checked few sites, but I really didn't understand how they work.
我有一个包含 4 列保存货币的数据表。目前我将它们视为普通列并手动将“$”附加到每个值。现在我需要格式化列以包含逗号。有没有插件可以做到这一点？我还想删除手动添加 '$' 值。我检查了几个网站，但我真的不明白它们是如何工作的。
回答by Greg Pettit
[Updating answer to use DataTables 1.9+ and to honor rynop's better answer. Original answer preserved below the horizontal rule, but it's both out of date and less efficient than it should be.]
[更新答案以使用 DataTables 1.9+ 并尊重 rynop 更好的答案。原始答案保留在水平规则之下，但它已经过时且效率低于应有的水平。]
Since it is really the data that you want to modify, not the entire cell, you should be using the "render" property inside of the columns definition. To produce clean code, you could store the actual modification method elsewhere and just call over to it:
由于它确实是您要修改的数据，而不是整个单元格，因此您应该使用列定义内的“渲染”属性。要生成干净的代码，您可以将实际的修改方法存储在其他地方，然后调用它：
var myTable = $('#mytable').DataTable({
...
"columns": [
{
"data" : "key_of_column",
"render" : function( data, type, full ) {
// you could prepend a dollar sign before returning, or do it
// in the formatNumber method itself
return formatNumber(data);
}
}
]
...
});
// elsewhere... probably more likely in a utility namespace or module
function formatNumber(n) {
return n.replace(/(\d)(?=(\d\d\d)+(?!\d))/g, ",");
}
formatNumberuses the regex from this accepted answer:
formatNumber使用此已接受答案中的正则表达式：
Add comma to numbers every three digits
[original answer]
【原答案】
I wouldn't add dollar values to each cell myself, a decision that has the side-effect of reducing the complexity of what you need to do. ;-) In any spreadsheet or table of currency values, you only need to put the currency symbol in the header or the first row. Putting it in the header will make your life easier, putting it in the first row will actually add complexity to your problem.
我不会自己为每个单元格添加美元价值，这一决定会降低您需要做的事情的复杂性。;-) 在任何电子表格或货币值表中，您只需将货币符号放在标题或第一行中。把它放在标题中会让你的生活更轻松，把它放在第一行实际上会增加你的问题的复杂性。
So, back to DataTables itself, you have multiple ways to skin this cat but here are two:
所以，回到 DataTables 本身，你有多种方法可以给这只猫剥皮，但这里有两种：
Render the whole table without the commas (ie. default DataTables behaviour) but adding a class to those particular cells with the sClass parameter. Then use fnDrawCallback to fire the comma-creating function as described in the above link.
Use only the regex from the above link to modify the cell as data comes in.
呈现不带逗号的整个表格（即默认的 DataTables 行为），但使用 sClass 参数向那些特定单元格添加一个类。然后使用 fnDrawCallback 触发上述链接中所述的逗号创建函数。
仅使用上述链接中的正则表达式在数据传入时修改单元格。
Something like this (where 3 is the zero-index column that you're modifying):
像这样（其中 3 是您正在修改的零索引列）：
"aoColumnDefs": [ {
"aTargets": [3],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
var $currencyCell = $(nTd);
var commaValue = $currencyCell.text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, ",");
$currencyCell.text(commaValue);
}
}]
(aoColumnDefsis part of your initialization object passed to dataTable());
(aoColumnDefs是传递给dataTable()) 的初始化对象的一部分；
If you absolutely MUST add the dollar sign, you would just prepend it in the same function before the textfunction.
如果您绝对必须添加美元符号，则只需在该函数之前的同一函数中添加它即可text。
回答by rynop
I would leverage the 'mRender' method in 'aoColumns'. Its cleaner and probably more efficient than the currently accepted solution.
我会利用“aoColumns”中的“mRender”方法。它比目前接受的解决方案更清洁，可能更有效。
Example:
例子：
oTable = $('#mytable').dataTable( {
...
"aoColumns": [
{
"sTitle": "MyCol With Number",
"mRender": function( data, type, full ) {
return formatNumber(data);
},
...
Where formatNumber is defined as follows:
其中 formatNumber 定义如下：
function formatNumber(n) {
return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
Using fnRender also allows you to have complete control over the cell - for example if you want wrap the data with some HTML.
使用 fnRender 还可以让您完全控制单元格 - 例如，如果您想用一些 HTML 包装数据。
See http://www.datatables.net/usage/columns#mRenderfor complete specifications
回答by tbird
DataTables 1.10 has a new Number Helperwhich is used in conjunction with the render option to easily format numbers, like this:
DataTables 1.10 有一个新的数字助手，它与渲染选项结合使用以轻松格式化数字，如下所示：
{
data: 'price',
render: $.fn.dataTable.render.number( ',', '.', 2, '$' )
}
This will display a price value like 1000.006 as "$1,000.01".
这将显示像 1000.006 这样的价格值作为“$1,000.01”。
