Boostrap Table How to add commas between numbers

Question

Hi Have the following code which populates bootstrap table.

During the table generation how do I format and add "$" before the number and any number should be displayed in this order $100,00,00.00 or $100,00.00 or $100.00

here is my code

$(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

<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"
          }]
        }

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString — Scott Marcus, Mar 16 '17 at 20:05

score 0 · Answer 1 · edited May 23 '17 at 12:00

You could use toLocaleString() to convert number to currency format. Or use regular expression to do this, How to print a number with commas as thousands separators in JavaScript

Working example.

$(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>

Working plunkr http://plnkr.co/edit/PSCR5iS7DSWkuQb1jv5P?p=preview

Hope this helps.

score -1 · Answer 2 · answered Mar 16 '17 at 20:03

-1

a couple of prototype functions that I use for this

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();
};

then you can use "10000".toCommaSeperated() or "100000".toUSD()

answered Mar 16 '17 at 20:03

stackoverfloweth

6,669
5
38
69

Out of curiosity, why would you put these methods on `String` rather than `Number`? – E. Sundin Mar 16 '17 at 20:08
Everytime I've needed it, I've had a string. It seems more useful to say .toString().toUSD() than have to convert everything to numbers – stackoverfloweth Mar 16 '17 at 20:10
PSA: Just be careful about extending native object prototypes. It's not a forbidden practice, but if you use other 3rd party libraries, you can run into unexpected behavior. http://stackoverflow.com/a/14035984/4987197 – mhodges Mar 16 '17 at 20:10
@stackoverfloweth I How would it convert 100000 -> $100,00.00. Is this the right way to use $($(someVal).toCommaSeparated()).toUSD(); – user244394 Mar 16 '17 at 20:59
not quite, this is a string prototype function so you can call it on anything that's a string. it looks like your using it like a jquery function. It should be as easy as `saying someVal.toString().toUSD();` or if someVal is already a string than simply `someVal.toUSD()` – stackoverfloweth Mar 16 '17 at 21:01

Boostrap Table How to add commas between numbers

2 Answers2