DataTables Summation Formatting

mcarlotta

I have implemented summation on a few of my columns via:

"footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
 
            // Total DEC over current page
            if (api.column( 6 ).data().length){
                var decTotal = api
                    .column( 6, { page: 'current'} )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    } ) }
                else{ oohTotal = 0};
 
            
            // Total OOH over current page
            if (api.column( 7 ).data().length){
                var oohTotal = api
                    .column( 7, { page: 'current'} )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    } ) }
                else{ oohTotal = 0};
                
           // Total OOH over current page
            if (api.column( 8 ).data().length){
                var askingTotal = api
                    .column( 8, { page: 'current'} )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    } ) }
                else{ oohTotal = 0};
                
            
            // Update footer
            $( api.column( 6 ).footer() ).html(
                '' + decTotal + ''
            );
            
            $( api.column( 7 ).footer() ).html(
                '' + oohTotal + ''
            );
            
            $( api.column( 8 ).footer() ).html(
                '$'+askingTotal+ ''
            );
        },

Now I am trying to format the summation values similar as I did via:

{ 
                "data": "retail_weekly_price", 
                "render": $.fn.dataTable.render.number( '\,', '.', 0, '$' ) 
            },

In example: 20000 => 20,000

What is the proper way to achieve this task?

allan

The render helper that you are using returns an object that DataTables can use in columns.render - so it has a display property which is a function that does the actual formatting.

So what you would do is:

    $.fn.dataTable.render.number( '\,', '.', 0, '$' ).display( myNumber );

However, better yet would be to store the rendering function in a variable before the table is initialised, and then just use that:

var numFormat = $.fn.dataTable.render.number( '\,', '.', 0, '$' ).display;

...

numFormat( myNumber );

Allan

mcarlotta

Hi Allan,

My apologies for the confusion on where this should be implemented.

Is this needing to take place in the section?

$( api.column( 8 ).footer() ).html(
                '$'+askingTotal+ ''
            );

All my columns are properly formatted. It is just the footer summations that I need to format correctly as well ie: 20000 => 20,000

allan

If you were to use the numFormat variable that I suggested above, then you would use:

$( api.column( 8 ).footer() ).html( numFormat( askingTotal ) );

Regards,
Allan

mcarlotta

Genius as usual...thanks!