引导表如何在数字之间添加逗号答案

【问题标题】：Boostrap Table How to add commas between numbers引导表如何在数字之间添加逗号
【发布时间】：2017-03-16 20:02:00
【问题描述】：

嗨，有以下代码填充引导表。

在表格生成期间如何格式化并在数字前添加"$" 并且任何数字都应按此顺序显示$100,00,00.00 or $100,00.00 或 $100.00

这是我的代码

$(function () {
$.getJSON("https://api.myjson.com/bins/89vsf", function (jsonFromFile) {
    $('#table1').bootstrapTable({
        data: jsonFromFile.rows
    })
    var data =  $('#table1').bootstrapTable('getData');
    var total1 = data.reduce(function(a, b){

    return a + parseFloat(b.LongMarketValue.replace('$',''));
}, 0);

document.querySelector('.total1').innerHTML = total1;

});
});

HTML 表格

<table id="table1">
                    <thead>
                        <tr>
                         <th data-field="state" data-checkbox="true"></th>
                            <th data-field="Account">Account #</th>
                            <th data-field="ClientName">Client</th>
                            <th data-field="AccountType">Account Type</th>
                            <th data-field="MarketValue"> Market Value</th>
                        </tr>
                    </thead>
                      <tfoot>
                    <tr>
                      <td></td>
                      <td></td>
                      <th></th>
                      <th> Total <span class="total1"></span></th>
                    </tr>
                  </tfoot>
                </table>

JSON

{
          "Name": "Jie wn",
          "Account": "C10",
          "LoanApproved": "12/5/2015",
          "LastActivity": "4/1/2016",
          "PledgedPortfolio": "1000",
          "MaxApprovedLoanAmt": "10000",
          "LoanBalance": "1849000",
          "AvailableCredit": "2877.824375",
          "Aging": "3",
          "Brokerage": "My Broker",
          "Contact": "oJohnson",
          "ContactPhone": "-3614",
          "RiskCategory": "Yellow",
          "rows": [{
            "Account": "06-1234",
            "ClientName": "S Smth",
            "AccountType": "tail",
            "LongMarketValue": "$40000"
          },  {
            "Account": "08-1235",
              "ClientName": "all Sth",
            "AccountType": "REV Trust",
            "LongMarketValue": "$55000"
          },
           {
            "Account": "086-1236",
              "ClientName": "Sly Smith",
            "AccountType": "Reail",
            "LongMarketValue": "$5500"
          }]
        }

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您可以使用toLocaleString() 将数字转换为货币格式。或者使用正则表达式来做到这一点，How to print a number with commas as thousands separators in JavaScript

工作示例。

$(function () {
$.getJSON("https://api.myjson.com/bins/89vsf", function (jsonFromFile) {
    var rows = jsonFromFile.rows.map(function(item){
        item.LongMarketValue = parseFloat(item.LongMarketValue.replace('$',''));
        item.LongMarketValue = getFormattedCurrency(item.LongMarketValue);
        return item;
    });
    $('#table1').bootstrapTable({
        data: rows
    })
    var data =  $('#table1').bootstrapTable('getData');
    var total1 = data.reduce(function(a, b){
      
    return a + parseFloat(b.LongMarketValue.replace('$','').split(',').join(''));
}, 0);

document.querySelector('.total1').innerHTML = getFormattedCurrency(total1);


});
});

function getFormattedCurrency(number){
  return number.toLocaleString('en-US',{style: 'currency', currency: 'USD'});
}

<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <table id="table1">
                    <thead>
                        <tr>
                         <th data-field="state" data-checkbox="true"></th>
                            <th data-field="Account">Account #</th>
                            <th data-field="ClientName">Client</th>
                            <th data-field="AccountType">Account Type</th>
                            <th data-field="LongMarketValue"> Market Value</th>
                        </tr>
                    </thead>
                      <tfoot>
                    <tr>
                      <td></td>
                      <td></td>
                      <td></td>
                      <th></th>
                      <th> Total <span class="total1"></span></th>
                    </tr>
                  </tfoot>
                </table>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
	
	<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>    
   <script src="script.js"></script>
  </body>

</html>

工作小伙伴http://plnkr.co/edit/PSCR5iS7DSWkuQb1jv5P?p=preview

希望这会有所帮助。

【讨论】：

【解决方案2】：

我为此使用的几个原型函数

String.prototype.toTwoDecimals = function () {
    var value = this;
    if (isNaN(value)) {
        value = 0;
    }
    return parseFloat(Math.round(value * 100) / 100).toFixed(2);
};

String.prototype.toCommaSeperated = function () {
    var value = this;
    if (isNaN(value)) {
        value = 0;
    }
    while (/(\d+)(\d{3})/.test(value.toString())) {
        value = value.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
    }
    return value;
};

String.prototype.toUSD = function () {
    var value = this;
    if (isNaN(value)) {
        value = 0;
    }
    return '$' + this.toString().toTwoDecimals().toCommaSeperated();
};

那么你可以使用"10000".toCommaSeperated()或"100000".toUSD()

【讨论】：

出于好奇，您为什么要将这些方法放在String 而不是Number？
每次我需要它时，我都有一个字符串。说 .toString().toUSD() 似乎比必须将所有内容都转换为数字更有用
PSA：在扩展原生对象原型时要小心。这不是禁止的做法，但如果您使用其他 3rd 方库，您可能会遇到意外行为。 stackoverflow.com/a/14035984/4987197
@stackoverfloweth 我如何转换 100000 -> $100,00.00。这是使用 $($(someVal).toCommaSeparated()).toUSD(); 的正确方法吗？
不完全是，这是一个字符串原型函数，因此您可以在任何字符串上调用它。看起来您像使用 jquery 函数一样使用它。它应该像 saying someVal.toString().toUSD(); 一样简单，或者如果 someVal 已经是一个字符串，而不是简单的 someVal.toUSD()