5

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

4

3 回答 3

9

[更新答案以使用 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使用这个接受的答案中的正则表达式：

每三位数字添加逗号

[原答案]

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

所以，回到 DataTables 本身，你有多种方法可以给这只猫剥皮，但这里有两种：

  1. 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.

  2. Use only the regex from the above link to modify the cell as data comes in.

Something like this (where 3 is the zero-index column that you're modifying):

"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 is part of your initialization object passed to dataTable());

If you absolutely MUST add the dollar sign, you would just prepend it in the same function before the text function.

于 2012-11-08T06:11:33.420 回答
6

I would leverage the 'mRender' method in 'aoColumns'. Its cleaner and probably more efficient than the currently accepted solution.

Example:

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

Where formatNumber is defined as follows:

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.

See http://www.datatables.net/usage/columns#mRender for complete specifications

于 2012-12-19T17:32:32.370 回答
3

DataTables 1.10 has a new Number Helper which is used in conjunction with the render option to easily format numbers, like this:

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

This will display a price value like 1000.006 as "$1,000.01".

于 2017-12-10T21:01:17.333 回答