jQuery 數據表：千位分隔符選項不起作用
[英]jQuery DataTable: thousands separator option doesn't work
問題描述
在這里，我按照描述設置了數據表千位分隔符，但它沒有按我預期的方式工作。
有誰能夠幫我？
$('#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>
謝謝
2 個解決方案
解決方案1
1 已采納 2021-05-13 16:19:22
您可以使用列渲染 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>
它具有以下特點：
它適用於表中的每條記錄，而不僅僅是顯示在第一頁上的記錄。
它不需要正則表達式，例如
data.replace(/\B(?=(\d{3})+(?,\d))/g, ";");- 因此更容易理解。它使用 JavaScript 對使用
toLocaleString的數字格式的內置支持。 這意味着還可以通過應用不同的語言環境（語言標簽）來更改千位分隔符。 例如，如果您將'en-US'替換為fr-FR，那么您將獲得法國使用的千位分隔符類型，即空格 - 所以$320 800而不是$320,800。
上面的代碼假定源數據以不帶貨幣符號的數字形式提供：
<td>320800</td>
如果源數據的字符串開頭已經有貨幣符號，例如，像這樣：
<td>$320800</td>
那么你需要調整渲染 function 如下：
render: function ( data, type, row, meta ) {
return data.substring(0, 1) + parseInt(data.substring(1)).toLocaleString('en-US');
}
解決方案2
0 2021-05-13 15:22:34
我解決了這個問題，我使用以下代碼
$('#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);
});
JQuery Datatable插件在CodeIgniter 3.x中無法正常工作
[英]JQuery Datatable plugin doesn't work correctly in CodeIgniter 3.x
jQuery DataTable在單個列上進行多個篩選不起作用
[英]Jquery DataTable multiple filtrering on a single column doesn't work
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.