VF page, using remote objects, in jquery need to format Date and Currency field

Question

I'm using remote objects for this page.

I'm trying to format the field Invoice_Amount__c to contain commas which will separate the numbers and format the Invoice_Date__c field to mm/dd/yyyy.

I have an image below of what it looks like.

The 2 fields that I want to format are here

        { "data": "_props.Invoice_Amount__c",
            "defaultContent": '' },
        { "data": "_props.Invoice_Date__c",
            "defaultContent": '' },

My entire code is here

    j$ = jQuery.noConflict();
var profile = ('{!$Profile.Name}');
j$(document).ready( function () {
    var soTable = j$('[id$="salesopstable"]').DataTable({
    "paging": false,
    "ordering": false,
    "info": false,
    "bFilter": false,
    "oLanguage": {
    "sEmptyTable": "There are no requests to approve"
    },
        // Use the Remote Object retrieve method to get a list of Invoices
        "ajax": function(data, callback, settings) {
            var subinv = new SObjectModel.Invoice();
            subinv.retrieve({ where: {SalesOps_Change_Requests_Count__c: {gt: 0}}, limit: 100}, function(err, records){
                if(err) alert(err.message);
                else {
                    callback({'data': records});
                };
            });
        },
        //this field is for hyperlinking to the Subscription
        "columnDefs": [{
            "targets": 1,
            "render": function ( data, type, full, meta ){
            return '<a href="/'+full._props.Subscription__c+'" target="_blank">' + full._props.Subscription_Name__c + '</a>';
            }
            }],
        // Specify our columns. The first column is used to control expanding and collapsing to see changes.
        "columns": [
            { "class": 'details-control',
                "orderable": false,
                "data": null,
                "defaultContent": '',
                width: "8%" },
            { "data": "_props.Name",
                "defaultContent": '' },
            { "data": "_props.Currency_Code_Name__c",
                "defaultContent": '' },
            { "data": "_props.Invoice_Amount__c",
                "defaultContent": '' },
            { "data": "_props.Invoice_Date__c",
                "defaultContent": '' },
            { "data": "_props.ToEmails__c",
                "defaultContent": '' },
            { "data": "_props.CcEmails__c",
                "defaultContent": '' },
            { "data": "_props.Invoice_Details__c",
                "defaultContent": '' },
            { "data": "_props.Invoice_Type__c",
                "defaultContent": '' },
            { "data": "_props.Client_Firm__c",
                "defaultContent": '' },
            { "data": "_props.Client_Firm_ID__c",
                "defaultContent": '' },
            { "data": "_props.On_Hold__c",
                "defaultContent": '' }

        ],
        order: [[1, 'asc']],
    } );

Any assistance is greatly appreciated!

Happy New Year to all!

Louis M.

Answer 1

I'm using the following to format my last column in US currency:

columnDefs: [ {
   'targets': -1, //'_all',
   'render':  function ( data, type, full, meta ) {
       return '$ ' + Number(data).toFixed(2).replace(/\B(?=(?=\d*\.)(\d{3})+(?!\d))/g, ',');
    }
} ]

You can try find the format string you want, or try to implement another popular javascript library Moments, or try the following: data.getMonth() + '/' + data.getDate() + '/' + data.getFullYear()

Try if this columnDefs will work for you, assuming columns 3 and 4 are your Amount and Date columns:

"columnDefs": [{
            "targets": 1,
            "render": function ( data, type, full, meta ){
            return '<a href="/'+full._props.Subscription__c+'" target="_blank">' + full._props.Subscription_Name__c + '</a>';
            },
            "targets": 2,
            "render": function ( data, type, full, meta ){
            return '$ ' + Number(data).toFixed(2).replace(/\B(?=(?=\d*\.)(\d{3})+(?!\d))/g, ',');
            },
            "targets": 3,
            "render": function ( data, type, full, meta ){
            return data.getMonth() + '/' + data.getDate() + '/' +  data.getFullYear();
            }
            }]