How to format numbers into indian currency (in datatable) using javascript/jquery

Question

i have a data table which is rendring on the basis of json data i am secussfully rendring the datatable but the problem is i have to format amount into indian currency like for 27227004 i want it to be 2,72,22,004

$(document).ready(function (){
 
    var table_data = 
     [
       [
         "CHEF BAKERS BROOKFIELD",
         "0",
         "2967629",
         "0"
       ],
       [
         "CHEF BAKERS ARAKERE",
         "0",
         "302542",
         "0"
       ],
       [
         "CHEF BAKERS AYYAPPA NGR",
         "0",
         "425433",
         "0"
       ],
       [
         "Chef Bakers Bellandur",
         "0",
         "1278244",
         "0"
       ],
       [
         "CHEF BAKERS BAGMANE CBP",
         "0",
         "546345",
         "0"
       ],
       [
         "CHEF BAKERS CHANDAPURA",
         "0",
         "167527",
         "0"
       ],
       [
         "Chef Bakers Doddanekkundi",
         "0",
         "490462",
         "0"
       ],
       [
         "CHEF BAKERS SIDDAPURA",
         "0",
         "461639",
         "0"
       ],
       [
         "CHEF BAKERS ECITY",
         "0",
         "699634",
         "0"
       ],
       [
         "CHEF BAKERS VYDEHI",
         "0",
         "459675",
         "0"
       ],
       [
         "CHEF BAKERS HARLUR ROAD",
         "0",
         "229458",
         "0"
       ],
       [
         "Chef Bakers Hennur Main Road",
         "0",
         "211808",
         "0"
       ],
       [
         "CHEF BAKERS HSR LAYOUT",
         "0",
         "806820",
         "0"
       ],
       [
         "CHEF BAKERS KADUBEESANAHALLI",
         "0",
         "1108619",
         "0"
       ],
       [
         "CHEF BAKERS COFFEE BOARD",
         "0",
         "774311",
         "0"
       ],
       [
         "Chef Bakers Kaggadasapura",
         "0",
         "280712",
         "0"
       ],
       [
         "Chef Bakers Koramangala",
         "0",
         "345426",
         "0"
       ],
       [
         "CHEF BAKERS KASAVANAHALLI",
         "0",
         "415546",
         "0"
       ],
       [
         "Chef Bakers Marathahalli 1",
         "0",
         "525344",
         "0"
       ],
       [
         "Chef bakers Marathahalli 2",
         "0",
         "507047",
         "0"
       ],
       [
         "Chef Bakers Mahadevapura",
         "0",
         "2518170",
         "0"
       ],
       [
         "CHEF BAKERS BEL LAYOUT",
         "0",
         "404171",
         "0"
       ],
       [
         "CHEF BAKERS MG ROAD",
         "0",
         "450749",
         "0"
       ],
       [
         "CHEF BAKERS MANYATA TECH PARK",
         "0",
         "428558",
         "0"
       ],
       [
         "CHEF BAKERS NAGAWARA",
         "0",
         "444891",
         "0"
       ],
       [
         "CHEF BAKERS PRESTIGE SHANTHINIKETAN",
         "0",
         "576911",
         "0"
       ],
       [
         "CHEF BAKERS PRITECH",
         "0",
         "1269371",
         "0"
       ],
       [
         "CHEF BAKERS RR NAGAR",
         "0",
         "566927",
         "0"
       ],
       [
         "Chef Bakers Kadugodi",
         "0",
         "1199501",
         "0"
       ],
       [
         "CHEF BAKERS SARJAPURA ROAD",
         "0",
         "457940",
         "0"
       ],
       [
         "CHEF BAKERS SINGASANDRA",
         "0",
         "245249",
         "0"
       ],
       [
         "CHEF BAKERS SPICE GARDEN",
         "0",
         "434369",
         "0"
       ],
       [
         "Chef Bakers Whitefield",
         "0",
         "1360325",
         "0"
       ],
       [
         "CHEF BAKERS YELAHANKA",
         "0",
         "1213855",
         "0"
       ]
     ]
            

    var table = $('#example').DataTable( {
        data: table_data,
        "scrollY": "200px",
     "scrollCollapse": true,
    } );    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example" class="table table-striped ">
    <thead>
        <tr>
            <th>Outlet</th>
            <th>MTD</th>
            <th>YTD</th>
            <th>Todays's Transaction</th>
            
        </tr>
    </thead>
   
</table>

what i want to do is to format the numbers into indian currency

please any one have any idea guide me please

*i am not able to achieve that by java*, java is entirely different form javascript — Mayank Pandeyz, Nov 19 '18 at 11:06
Try this: https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript — Mayank Pandeyz, Nov 19 '18 at 11:07
@MayankPandeyz i know i know, but the json i am getting is from java end only — , Nov 19 '18 at 11:07
have a look at this https://stackoverflow.com/questions/7327046/jquery-number-formatting — Kiranramchandran, Nov 19 '18 at 11:08
Maybe useful for you https://stackoverflow.com/questions/47789487/how-to-format-currency-in-datatables — Girish, Nov 19 '18 at 11:08
you all i providing me the links i know already ..here my problem is that i am creating table with datatables so how can i achieve that..please check my snippet — , Nov 19 '18 at 11:10

score 1 · Answer 1 · answered Nov 19 '18 at 11:13

1

You can use it with toLocaleString

function formatNumber()
{
    var number = parseFloat($("#test").val());

    console.log(number.toLocaleString('en-IN'));
}

formatNumber();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" value="2967629" />

<input type="button" onclick="formatNumber()" value="Format Number" />

answered Nov 19 '18 at 11:13

Hary

5,690
7
42
79

i already know how to format buy using .tostring function but how can i apply in my table which is data table please can you edit my code? – Nov 19 '18 at 11:16

Girish · Answer 2 · 2018-11-19T11:33:15.197

Try datatable rander option on specific column

$(document).ready(function (){
 
    var table_data=[["CHEF BAKERS BROOKFIELD","0","2967629","0"],["CHEF BAKERS ARAKERE","0","302542","0"],["CHEF BAKERS AYYAPPA NGR","0","425433","0"],["Chef Bakers Bellandur","0","1278244","0"],["CHEF BAKERS BAGMANE CBP","0","546345","0"],["CHEF BAKERS CHANDAPURA","0","167527","0"],["Chef Bakers Doddanekkundi","0","490462","0"],["CHEF BAKERS SIDDAPURA","0","461639","0"],["CHEF BAKERS ECITY","0","699634","0"],["CHEF BAKERS VYDEHI","0","459675","0"],["CHEF BAKERS HARLUR ROAD","0","229458","0"],["Chef Bakers Hennur Main Road","0","211808","0"],["CHEF BAKERS HSR LAYOUT","0","806820","0"],["CHEF BAKERS KADUBEESANAHALLI","0","1108619","0"],["CHEF BAKERS COFFEE BOARD","0","774311","0"],["Chef Bakers Kaggadasapura","0","280712","0"],["Chef Bakers Koramangala","0","345426","0"],["CHEF BAKERS KASAVANAHALLI","0","415546","0"],["Chef Bakers Marathahalli 1","0","525344","0"],["Chef bakers Marathahalli 2","0","507047","0"],["Chef Bakers Mahadevapura","0","2518170","0"],["CHEF BAKERS BEL LAYOUT","0","404171","0"],["CHEF BAKERS MG ROAD","0","450749","0"],["CHEF BAKERS MANYATA TECH PARK","0","428558","0"],["CHEF BAKERS NAGAWARA","0","444891","0"],["CHEF BAKERS PRESTIGE SHANTHINIKETAN","0","576911","0"],["CHEF BAKERS PRITECH","0","1269371","0"],["CHEF BAKERS RR NAGAR","0","566927","0"],["Chef Bakers Kadugodi","0","1199501","0"],["CHEF BAKERS SARJAPURA ROAD","0","457940","0"],["CHEF BAKERS SINGASANDRA","0","245249","0"],["CHEF BAKERS SPICE GARDEN","0","434369","0"],["Chef Bakers Whitefield","0","1360325","0"],["CHEF BAKERS YELAHANKA","0","1213855","0"]];

    var table = $('#example').DataTable( {
        data: table_data,
        "scrollY": "200px",
     "scrollCollapse": true,
       "columns": [
            { mData: '0' } ,
            { mData: '1' },
            { mData: '2',  render: function (data, type, row, meta) { 
            return parseFloat(data).toLocaleString('en-IN');
            }
            },
            { mData: '3' }
        ]
    } );    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/currencyformatter.js/2.2.0/currencyFormatter.min.js"></script>
<table id="example" class="table table-striped ">
    <thead>
        <tr>
            <th>Outlet</th>
            <th>MTD</th>
            <th>YTD</th>
            <th>Todays's Transaction</th>
            
        </tr>
    </thead>
   
</table>

hey buddy almost there but its not indian format like for302542 its giving 302,542.00 it should give 3,02,542...............can i use .toLocaleString('en-in') ..how can i use this — , Nov 19 '18 at 11:20
yeah right buddy its working..can i ask a small question also please? — , Nov 19 '18 at 11:38

score 1 · Accepted Answer · answered Nov 19 '18 at 11:27

1

I prepared sample fiddle with indian locale

var table = $('#example').DataTable({
    data: table_data,
    "scrollY": "200px",
    "scrollCollapse": true,
    "columnDefs": [{
      "targets": [2],
      "render": function(data, type, row) {
        return Number(data).toLocaleString('en-IN', {
          maximumFractionDigits: 2,
          style: 'currency',
          currency: 'INR'
        });
      }
    }]
  });

answered Nov 19 '18 at 11:27

dganenco

1,596
1
5
16

hey your solution worked for me but one more thing in other columns i.e MTD it can also have numbers it is showing 0 now but in future it can be any no..so how can i do this for other column also – Nov 19 '18 at 11:33
Hey, I attached updated fiddle https://jsfiddle.net/Dganenco/bukp9myh/5/. You should use columnDefs for any column which you want to customize – dganenco Nov 19 '18 at 11:36
Take a closer look to https://datatables.net/examples/advanced_init/column_render.html column rendering official documentation. Regards – dganenco Nov 19 '18 at 11:38
hey it worked ... :) can i ask a small question please? – Nov 19 '18 at 11:41
i want to align the some columns data to right i.e MTD and YTD how can i acheive that? – Nov 19 '18 at 11:46
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/183883/discussion-between-dheeraj-kumar-and-dganenco). – Nov 19 '18 at 11:49

score 1 · Answer 4 · answered Nov 19 '18 at 11:33

$(document).ready(function() {
    var table = $('#example').DataTable({
        data: table_data,
        columns: [
            { data: 'Outlet' },
            { data: 'MTD' },
            { data: 'YTD', render: function (data, type, row) {
                var data = parseFloat(data);
                return data.toLocaleString('en-IN');
            } },
            { data: 'Todays\'s Transaction' },
        ],
        "scrollY": "200px",
        "scrollCollapse": true,
    } );
} );

score 0 · Answer 5 · edited Jun 20 '20 at 09:12

You can format data your self before passing it to datatable like this:

/**
 * formatNum - Formats given number with n decimals and separated by x length of sections
 * example: formatNum(1000000) -> gives : 100.000
 *
 * @param integer n: length of decimal
 * @param integer x: length of sections
 */
const formatNum = function (num, n, x) {
  const re = `\\d(?=(\\d{${x || 3}})+${n > 0 ? '\\.' : '$'})`
  // Convert string to number and do regex replace
  return Number(num).toFixed(Math.max(0, ~~n)).replace(new RegExp(re, 'g'), '$&,')
}

$(document).ready(function () {

  var table_data =
    [
      [
        "CHEF BAKERS BROOKFIELD",
        "0",
        "2967629",
        "0"
      ],
      [
        "CHEF BAKERS ARAKERE",
        "0",
        "302542",
        "0"
      ],
      [
        "CHEF BAKERS AYYAPPA NGR",
        "0",
        "425433",
        "0"
      ],
      [
        "Chef Bakers Bellandur",
        "0",
        "1278244",
        "0"
      ],
      [
        "CHEF BAKERS BAGMANE CBP",
        "0",
        "546345",
        "0"
      ],
      [
        "CHEF BAKERS CHANDAPURA",
        "0",
        "167527",
        "0"
      ],
      [
        "Chef Bakers Doddanekkundi",
        "0",
        "490462",
        "0"
      ],
      [
        "CHEF BAKERS SIDDAPURA",
        "0",
        "461639",
        "0"
      ],
      [
        "CHEF BAKERS ECITY",
        "0",
        "699634",
        "0"
      ],
      [
        "CHEF BAKERS VYDEHI",
        "0",
        "459675",
        "0"
      ],
      [
        "CHEF BAKERS HARLUR ROAD",
        "0",
        "229458",
        "0"
      ],
      [
        "Chef Bakers Hennur Main Road",
        "0",
        "211808",
        "0"
      ],
      [
        "CHEF BAKERS HSR LAYOUT",
        "0",
        "806820",
        "0"
      ],
      [
        "CHEF BAKERS KADUBEESANAHALLI",
        "0",
        "1108619",
        "0"
      ],
      [
        "CHEF BAKERS COFFEE BOARD",
        "0",
        "774311",
        "0"
      ],
      [
        "Chef Bakers Kaggadasapura",
        "0",
        "280712",
        "0"
      ],
      [
        "Chef Bakers Koramangala",
        "0",
        "345426",
        "0"
      ],
      [
        "CHEF BAKERS KASAVANAHALLI",
        "0",
        "415546",
        "0"
      ],
      [
        "Chef Bakers Marathahalli 1",
        "0",
        "525344",
        "0"
      ],
      [
        "Chef bakers Marathahalli 2",
        "0",
        "507047",
        "0"
      ],
      [
        "Chef Bakers Mahadevapura",
        "0",
        "2518170",
        "0"
      ],
      [
        "CHEF BAKERS BEL LAYOUT",
        "0",
        "404171",
        "0"
      ],
      [
        "CHEF BAKERS MG ROAD",
        "0",
        "450749",
        "0"
      ],
      [
        "CHEF BAKERS MANYATA TECH PARK",
        "0",
        "428558",
        "0"
      ],
      [
        "CHEF BAKERS NAGAWARA",
        "0",
        "444891",
        "0"
      ],
      [
        "CHEF BAKERS PRESTIGE SHANTHINIKETAN",
        "0",
        "576911",
        "0"
      ],
      [
        "CHEF BAKERS PRITECH",
        "0",
        "1269371",
        "0"
      ],
      [
        "CHEF BAKERS RR NAGAR",
        "0",
        "566927",
        "0"
      ],
      [
        "Chef Bakers Kadugodi",
        "0",
        "1199501",
        "0"
      ],
      [
        "CHEF BAKERS SARJAPURA ROAD",
        "0",
        "457940",
        "0"
      ],
      [
        "CHEF BAKERS SINGASANDRA",
        "0",
        "245249",
        "0"
      ],
      [
        "CHEF BAKERS SPICE GARDEN",
        "0",
        "434369",
        "0"
      ],
      [
        "Chef Bakers Whitefield",
        "0",
        "1360325",
        "0"
      ],
      [
        "CHEF BAKERS YELAHANKA",
        "0",
        "1213855",
        "0"
      ]
    ].map(i => [i[0], i[1], formatNum(i[2]), i[3]])


  var table = $('#example').DataTable({
    data: table_data,
    "scrollY": "200px",
    "scrollCollapse": true,
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="example" class="table table-striped ">
    <thead>
        <tr>
            <th>Outlet</th>
            <th>MTD</th>
            <th>YTD</th>
            <th>Todays's Transaction</th>
            
        </tr>
    </thead>
   
</table>

EDIT

Here is with version with toLocaleString (just change formatting function to this) :

const formatNum = function (num) {
  return (parseFloat(num)).toLocaleString('en-IN')
}

hey buddy almost there but its not indian format like for302542 its giving 302,542.00 it should give 3,02,542...............can i use .toLocaleString('en-in') ..how can i use this — , Nov 19 '18 at 11:24
I've added function that uses toLocaleString instead of manual formatting. — Goran.it, Nov 19 '18 at 14:49

How to format numbers into indian currency (in datatable) using javascript/jquery

5 Answers5

EDIT