jQuery DataTable：千位分隔符选项不起作用

Question

这里我按照 data table thousand separator 的描述进行了设置，但它并没有像我预期的那样工作。

有人可以帮我吗？

$('#example').dataTable( {
  "language": {
    "thousands": "'"
  }
} );

table.dataTable thead th {
  border-bottom: 0;
}
table.dataTable tfoot th {
  border-top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>



<link href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet"/>
<script src="http://cdn.datatables.net/plug-ins/1.10.24/sorting/formatted-numbers.js"></script>

<table id="example">
        <thead>
            <tr>
                <th>Seq.</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
        
        <tbody>
            <tr>
                <td>2</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>2011/04/25</td>
                <td>320800</td>
            </tr>
            <tr>
                <td>22</td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>2011/07/25</td>
                <td>170750</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>2009/01/12</td>
                <td>86000</td>
            </tr>
            <tr>
                <td>41</td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>2012/03/29</td>
                <td>433060</td>
            </tr>
            <tr>
                <td>55</td>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>2008/11/28</td>
                <td>162700</td>
            </tr>
            <tr>
                <td>21</td>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>2012/12/02</td>
                <td>372000</td>
            </tr>
            <tr>
                <td>46</td>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>2012/08/06</td>
                <td>137500</td>
            </tr>
          
        </tbody>
    </table>

谢谢

Answer 1

我解决了这个问题，我使用下面的代码

$('#example').dataTable( {
  "language": {
    "thousands": "'"
  }
} );


function numberWithCommas(number) {
    var parts = number.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}
$(document).ready(function() {
  $("#example td").each(function() {
    var num = $(this).text();
    var commaNum = numberWithCommas(num);
    $(this).text(commaNum);
  });

Answer 2

您可以使用列 render function 将源数据从没有千位分隔符的数字转换为您想要的格式。

$(document).ready(function() {

  var table = $('#example').DataTable( {
    "lengthMenu": [ 5, 10, 50, 100 ], // just for testing!
    columnDefs: [
      { 
        targets: [5], 
        render: function ( data, type, row, meta ) {
          return '$' + parseInt(data).toLocaleString('en-US');
        }
      }
    ]
  } );

} );

<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%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office in Country</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2</td>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>2011/04/25</td>
                <td>320800</td>
            </tr>
            <tr>
                <td>22</td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>2011/07/25</td>
                <td>170750</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>2009/01/12</td>
                <td>86000</td>
            </tr>
            <tr>
                <td>41</td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>2012/03/29</td>
                <td>433060</td>
            </tr>
            <tr>
                <td>55</td>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>2008/11/28</td>
                <td>162700</td>
            </tr>
            <tr>
                <td>21</td>
                <td>Brielle Williamson</td>
                <td>Integration Specialist</td>
                <td>New York</td>
                <td>2012/12/02</td>
                <td>372000</td>
            </tr>
            <tr>
                <td>46</td>
                <td>Herrod Chandler</td>
                <td>Sales Assistant</td>
                <td>San Francisco</td>
                <td>2012/08/06</td>
                <td>137500</td>
            </tr>
        </tbody>
    </table>

</div>

</body>

它具有以下特点：

它适用于 table 中的每条记录，而不仅仅是第一页上显示的记录。
它不需要像 data.replace(/\B(?=(\d{3})+(?!\d))/g, ","); 这样的正则表达式 - 因此更容易理解。
它使用 JavaScript 对使用 toLocaleString 的数字格式化的内置支持。这意味着也可以通过应用不同的语言环境（语言标签）来更改千位分隔符。例如，如果您将 'en-US' 替换为 fr-FR，那么您将获得法国使用的千位分隔符类型，即 space - 因此 0 800 而不是 0,800.

以上代码假定源数据提供为数字没有货币符号：

<td>320800</td>

如果源数据的字符串开头已经有货币符号，例如，像这样：

<td>0800</td>

那么你需要调整渲染函数如下：

render: function ( data, type, row, meta ) {
  return data.substring(0, 1) + parseInt(data.substring(1)).toLocaleString('en-US');
}

jQuery DataTable：千位分隔符选项不起作用

jQuery DataTable: thousands separator option doesn't work

html

javascript

datatables