Question

我有一个包含4列货币的数据表。目前我将它们视为普通列，并手动将'$'附加到每个值。现在我需要将列格式化为逗号。有没有插件可以做到这一点？我还想删除'$'值的手动添加。我查了几个网站，但我真的不明白它们是如何工作的。

Answer 1

[更新使用DataTables 1.9+的答案，并尊重rynop的更好答案。保留在横向规则下方的原始答案，但它既已过时且效率低于应有的水平。]

由于它实际上是您要修改的数据，而不是整个单元格，因此您应该使用列定义中的“render”属性。要生成干净的代码，您可以将实际的修改方法存储在其他地方，然后调用它：

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

formatNumber使用此接受答案中的正则表达式：

Add comma to numbers every three digits

[原始答案]

我不会自己为每个单元添加美元值，这个决定会降低您需要做的事情的复杂性。 ;-)在任何电子表格或货币值表中，您只需将货币符号放在标题或第一行中。将它放在标题中会使您的生活更轻松，将它放在第一行实际上会增加您的问题的复杂性。

所以，回到DataTables本身，你有多种方法可以为这只猫提供皮肤，但这里有两种：

使用逗号（即默认的DataTables行为）渲染整个表，但使用sClass参数向这些特定单元格添加一个类。然后使用fnDrawCallback触发逗号创建函数，如上面的链接所述。
仅使用上述链接中的正则表达式在数据输入时修改单元格。

像这样的东西（其中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, "$1,");
     $currencyCell.text(commaValue);
   }
}]

（aoColumnDefs是传递给dataTable()）的初始化对象的一部分;

如果绝对必须添加美元符号，您只需在text函数之前将其添加到同一函数中。

Answer 2

我会利用＆＃39; mRender＆＃39; ＆＃39; aoColumns＆＃39;中的方法。它比目前公认的解决方案更清洁，效率更高。

示例：

oTable = $('#mytable').dataTable( {
...
  "aoColumns": [
    { 
      "sTitle": "MyCol With Number",
       "mRender": function( data, type, full ) {
           return formatNumber(data);                                       
       },                                   
...

其中formatNumber的定义如下：

function formatNumber(n) {
    return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

使用fnRender还可以完全控制单元格 - 例如，如果您想用一些HTML包装数据。

有关完整规格，请参阅http://www.datatables.net/usage/columns#mRender

Answer 3

DataTables 1.10有一个新的Number Helper，它与render选项一起使用，可以轻松设置数字格式，如下所示：

{
    data: 'price',
    render: $.fn.dataTable.render.number( ',', '.', 2, '$' )
}

这将显示价格值1000.006为“$ 1,000.01”。

逗号和$ in datatable列

3 个答案: