2

I have a simple table with header and I'm using a DataTables plugin for it:

$('#uc-dashboard-top-customers .uc-dashboard-sortable').dataTable({
  'aaSorting': [[1, "desc"]],
  'sPaginationType': 'full_numbers'
});

In second column I have numerical values like 124.012, 9, 8.15, 16.5048 and so on. Now I need to order that column by numerical value, but format them as a currency, e.g 1224,21 €. I could format the values server side, but then it will be sorted as a string by Datatables.

Is there a way to define format for specific column?

4
  • How is the table being populated?
    – Simon
    Apr 21, 2017 at 15:05
  • It is generated by php, why?
    – Axel Stone
    Apr 21, 2017 at 15:34
  • If you are familiar with datatables specify the columns in the initialization and for currency use the following: render: $.fn.dataTable.render.number(",", ".", 2),
    – Simon
    Apr 21, 2017 at 15:36
  • How exactly could I use it in my code?
    – Axel Stone
    Apr 21, 2017 at 15:39

3 Answers 3

3

This should give you an idea of how to initialize the datatable. You will need to tweak it as necessary but it should certainly put you on the right track.

$('#uc-dashboard-top-customers .uc-dashboard-sortable').dataTable({
  'aaSorting': [[1, "desc"]],
  'sPaginationType': 'full_numbers',
    columns:   
        [{  
            data: "Field1",
            type: "date",
            width: "10%"
        }, {  
            data: "Field2",
            width: "10%"
        }, {  
            data: "Field3",
            type: "html",
            width: "10%"
        }, {  
            data: "Field4",
            width: "30%"
        }, {  
            data: "Field5",
            width: "10%"
        }, {  
            data: "Field6",
            render: $.fn.dataTable.render.number(",", ".", 2),
            width: "10%"
        }]
});
1

Why not use a sorting plugin like currency? Basically it does nothing but extracting the float value out of a string, suitable for any kind of currency formats :

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "currency-pre": function ( a ) {
        a = (a==="-") ? 0 : a.replace( /[^\d\-\.]/g, "" );
        return parseFloat( a );
    },
    "currency-asc": function ( a, b ) {
        return a - b;
    },
    "currency-desc": function ( a, b ) {
        return b - a;
    }
} );

var table = $('#example').DataTable({
  columnDefs : [
   { targets: 0, type: 'currency' }
  ]
})  

demo -> http://jsfiddle.net/zfkcj8g2/

A sorting plugin works regardless of how the dataTable is initialised, i.e DOM tables, JSON / array sourced or serverside.

1
  • This works, however for my older version of datatables I had to use: "aoColumnDefs": [ { "sType": "currency", "aTargets": [ 1 ] } ]
    – Axel Stone
    Apr 24, 2017 at 11:59
0

In case you want to format a calculated field in datatables

I do a lot of financial applications and like to use the 'numeral' javascript library:

<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>

Here's the calculated column before formatting as currency:

{ 
  "data": null,                                                         
  "render": function(data,type,row) { return (data["Revenue"] - data["Expenses"]) }
} 

Here's the calculated column formatting with the numeral library:

{ 
"data": null, 
 "render": function(data,type,row)
   { 
    return (numeral(data["Revenue"] - data["Expenses"]).format('$0,0.00'))
   }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.