渲染货币和符号并与来自不同单元格的数据相结合答案

【问题标题】：Render currency and symbol and combine with data from a different cell渲染货币和符号并与来自不同单元格的数据相结合
【发布时间】：2015-06-22 15:47:42
【问题描述】：

我正在使用最新的 jQuery DataTables v1.10.7 我正在尝试将一个数字解析为以下格式：$239.90 USD

我可以让货币使用这个命令：

columns: [
    { data: "Price", render: $.fn.dataTable.render.number(',', '.', 2, '$') },

但是这个输出是$239.90 没有USD

USD 应该来自我在名为 Currency 的不同行中的其他数据：row['Currency']

我想做的是这样的：

columns: [
{
    data: "Price",
    render: function (data, type, row) {
       var v = $.fn.dataTable.render.number(',', '.', 2, '$');
       return data + ' ' + row['Currency'];
    }
},

但我不明白如何将渲染结果保存到var v，这是行不通的。

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

使用下面的代码代替列定义。

columns: [
{
    data: "Price",
    render: function (data, type, row, meta) {
       if(type === 'display'){
          var abbr = row['Currency'];

          var symbol = "";              
          if(abbr == "USD"){
             symbol = "$";

          } else if(abbr == "GBP"){
             symbol = "&pound;";

          } else if(abbr == "EUR"){
             symbol = "&euro;";
          }

          var num = $.fn.dataTable.render.number(',', '.', 2, symbol).display(data);              
          return num + ' ' + abbr;           
       } else {           
          return data;
       }
    }
},

请参阅下面的示例进行演示。

$(document).ready(function() {
   var table = $('#example').DataTable({
     'columns': [
       null,
       null,
       null,
       null,
       null,
       { 
         render: function(data, type, row, meta){
            if(type === 'display'){
               var abbr = "EUR";
              
               var symbol = "";              
               if(abbr == "USD"){
                 symbol = "$";
               
               } else if(abbr == "GBP"){
                 symbol = "&pound;";
               
               } else if(abbr == "EUR"){
                 symbol = "&euro;";
               }
                 
               var num = $.fn.dataTable.render.number(',', '.', 2, symbol).display(data);              
               return num + ' ' + abbr;           
              
            } else {
               return data;
            }
         }
       }
     ]
   });
});

<link href="http://datatables.net/release-datatables/media/css/jquery.dataTables.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
 
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
 
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>320800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>170750</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>86000</td>
        </tr>
    </tbody>
</table>

【讨论】：

非常感谢！如果您能告诉我如何根据货币 3 字母（欧元、英镑等）更改 $ 符号
@user829174，虽然我认为它应该是符号或缩写，但不能两者兼而有之，但我已经更新了我的答案。

【解决方案2】：

1 个回答

对我有用

{
  "data": "Quality", "name": "Quality", "autoWidth": true,
  render: function (data, type, row) {
          var iData = $.fn.dataTable.render.number(',').display(data); 
          return '<a class="editable editable-click fa fa-minus-square" style="color:firebrick"></a> ' +
                 '<span>' + iData + '</span> ' +
                 '<div class="fa fa-plus-square" style="color:forestgreen"></div>';
          }

  },

【讨论】：