如何使用 javascript/jquery 将数字格式化为印度货币(在数据表中)

Posted

技术标签:

【中文标题】如何使用 javascript/jquery 将数字格式化为印度货币(在数据表中)【英文标题】:How to format numbers into indian currency (in datatable) using javascript/jquery 【发布时间】:2018-11-19 11:03:30 【问题描述】:

我有一个基于 json 数据渲染的数据表,我正在对数据表进行渲染,但问题是我必须将金额格式化为印度货币,例如 27227004,我希望它是 2,72,22,004

$(document).ready(function ()
	
    var table_data = 
    	[
    	  [
    	    "CHEF BAKERS ***FIELD",
    	    "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>

我想做的是将数字格式化为印度货币

请有任何想法的人指导我

【问题讨论】:

我无法通过 java 实现这一点,java 与 javascript 完全不同 试试这个:***.com/questions/2901102/… @MayankPandeyz 我知道我知道,但我得到的 json 仅来自 java 端 看看这个***.com/questions/7327046/jquery-number-formatting 也许对你有用***.com/questions/47789487/… 【参考方案1】:

我准备了带有印度语言环境的示例 fiddle

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'
        );
      
    ]
  );

【讨论】:

嘿,您的解决方案对我有用,但在其他列中还有一件事,即 MTD 它也可以有数字,现在显示为 0,但将来它可以是任何数字..所以我该怎么做其他栏目也 嘿,我附上了更新的小提琴jsfiddle.net/Dganenco/bukp9myh/5。您应该对要自定义的任何列使用 columnDefs 细看datatables.net/examples/advanced_init/column_render.html列渲染官方文档。问候 嘿,它成功了...... :) 我可以问一个小问题吗? 我想将一些列数据向右对齐,即 MTD 和 YTD 我怎样才能做到这一点?【参考方案2】:

你可以和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" />

【讨论】:

我已经知道如何使用 .tostring 函数格式化购买,但是我如何在我的表格中应用数据表格,请问您可以编辑我的代码吗?【参考方案3】:

在特定列上尝试数据表 rander 选项

$(document).ready(function ()
	
    var table_data=[["CHEF BAKERS ***FIELD","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>

【讨论】:

嘿哥们几乎就在那里,但它不是像 for302542 这样的印度格式,它给出 302,542.00 它应该给出 3,02,542......我可以使用 .toLocaleString(' en-in') ..我怎么用这个 请立即查看 是的,伙计,它的工作原理..我也可以问一个小问题吗?【参考方案4】:
$(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,
     );
 );

【讨论】:

【参考方案5】:

您可以在将数据传递给数据表之前自行格式化数据,如下所示:

/**
 * 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 ***FIELD",
        "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>

编辑

这里是带有 toLocaleString 的版本(只需将格式化功能更改为此):

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

【讨论】:

嘿,哥们几乎就在那里,但它不是像 for302542 这样的印度格式,它给出 302,542.00 它应该给出 3,02,542......我可以使用 .toLocaleString(' en-in') ..我怎么用这个 我添加了使用 toLocaleString 而不是手动格式化的函数。

以上是关于如何使用 javascript/jquery 将数字格式化为印度货币(在数据表中)的主要内容,如果未能解决你的问题,请参考以下文章

如何快速将数据传递给其他 UIViewcontroller

如何使用 C 将数独解决方案显示为图像

如何将数据传递给模态以使用bootstrap4.6动态构造模态

Android:如何将数据传递给子活动?

如何使用 ajax 将数据传递给控制器​​并相应地查看数据

如何使用 jquery/javascript 将文本插入 json [重复]