Mahajan344 Mahajan344 - 8 days ago 6
jQuery Question

format amount column in jquery datatable as $ and thousand place as comma

I am using jquery datatable and I have one column which is currently displaying amount with decimal.
I want to append $ in the beginning and put comma for thousand place.
Eg. Current its displaying as : 1526 or 1013.7

So It should display as $1,526 and $1,013.7

But most importantly it shouldn't break sorting functionality.

Code I am using is as below

first on page load :

var requestTable =
$('#tblCustomerGrid')
.DataTable({
data: data,
"columnDefs": [
{
"targets": 0,
"data": "clientId",
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$compile(nTd)($scope);
},
"orderable": false,
"searchable": false,
"render": function (data, type, full, meta) {
var hyperLink = "<a href='#' ng-click='$event.preventDefault(); OpenClientInfo(" + data + ")'>Get Client Details</a>";
return hyperLink; //'<a href="Index/' + data + '">' + data + '</a>';
}
},
{ "type": "num", "targets": 5 }
],
"columns": [
{ "data": "clientId" },
{ "data": "fullName" },
{ "data": "email" },
{ "data": "countryName" },
{ "data": "phone" },
{ "data": "grandTotal" }
],
"language": {
"lengthMenu": "_MENU_",
"thousands": ","
}
});

$('.panel-ctrls').append($('.dataTables_filter').addClass("pull-right")).find("label").addClass("panel-ctrls-center");
$('.panel-ctrls').append("<i class='separator'></i>");
$('.panel-ctrls').append($('.dataTables_length').addClass("pull-left")).find("label").addClass("panel-ctrls-center");

$('.panel-footer').append($(".dataTable+.row"));
$('.dataTables_paginate>ul.pagination').addClass("pull-right m-n");

$('.dataTables_filter input').attr("placeholder", "Search...");


then on button click :

requestTable.clear();
requestTable.draw();
requestTable.rows.add(data);
requestTable.draw();


As you can see I already tried

"language": {
"lengthMenu": "_MENU_",
"thousands": ","
}


and providing type
{ "type": "num", "targets": 5 }
but none of them worked

Answer

Datatables has a build inn function for this

   "columns": [
                { "data": "clientId" },
                { "data": "fullName" },
                { "data": "email" },
                { "data": "countryName" },
                { "data": "phone" },
                { "data": "grandTotal", 
                   render: $.fn.dataTable.render.number( ',', '.', 2, '$' ) }

It also allows for more customization

https://datatables.net/manual/data/renderers

Comments