How to Show Comma for thousand in Footer total

atataylor

I am trying to show the comma to show thousands, for example total showing 120000 should be 120,000.

Here is the code amended from the example, (Footer Call back example) but it is not giving me what I want. I would be grateful if anyone could show me who to amend the code.

```
(document).ready(function() {
$('#example').DataTable( {

        "paging": true,
        "autoWidth": true,
        "language": "",
        "decimal": ",",
        "thousands": ".",
    "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 over all pages
        total = api
            .column( 2 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( 2, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 2 ).footer() ).html(
            pageTotal +' ( '+ total +' total)'
        );

        total = api
            .column( 3 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( 3, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 3 ).footer() ).html(
            '£'+pageTotal +' ( £'+ total +' total)'
        );
    }
} );

} );

kthorngren

See if this thread regarding the use of the builtin number renderer helps. Something like this:

$.fn.dataTable.render.number( .... ).display( numberToRender );

Kevin

atataylor

Hi Kevin
Thanks for your input, trying to make sense of it. I am completely new to JavaScript and DataTables. Only started to look at JavaScript since giving DataTables a try out.

kthorngren

Here are the docs for the number renderer:
https://datatables.net/manual/data/renderers#Number-helper

I combined the format from the docs in the example Allan provided in this test case:
http://live.datatables.net/gagixafo/1/edit

If you still need help please provide a test case showing an example what you have so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

atataylor

Thanks for your help Kevin. The example I am using is from the DataTables site:

Called, Footer callback showing how to get a total at the bottom of the page.

https://datatables.net/examples/advanced_init/footer_callback.html

All I am trying to do is show the comma and turn $3008160 into $3,008,160

I have looked at the examples provided, thanks for that, the combined one is an example without the Footer callback.

I assume its a matter of adding the code: var numberRenderer = $.fn.dataTable.render.number( ',', '.', 2, '$' ).display; alert(numberRenderer(123456)); } );
But I am not sure how to. Thanks again.

kthorngren

Took that example and added the number renderer here:
http://live.datatables.net/zohecoyi/1/edit

Kevin

atataylor

Thanks Kevin, that’s perfect. I was using the function in the wrong place; I need to spend more time learning JavaScript. Thanks for your patience and thanks again for your help

kthorngren

Creating pages with Datatables is how I learned Javascript

Kevin

atataylor

I am glad you, did sounds like a very practical way to learn, thanks for the tip

atataylor

Hi Kevin

Could I pick your brains again please? I am trying to add an additional column to the code you provided to show a row number. After some research I have found this code which does what I want:

"fnRowCallback": function (nRow, aData, iDisplayIndex) {
 var index = iDisplayIndex +1;
$('td:eq(0)',nRow).html(index);
return nRow;
}   

By adding the extra column in the table and the <th> tags in the header and footer, it works and places the row number in the first column as expected.
However I am unable to combine this with footerCallback code provided in your code above. I thought it would be a case of adding in the code as below:

<script> type="text/javascript">
                
$(document).ready(function() {
  
    var numberRenderer = $.fn.dataTable.render.number( ',', '.', 2,   ).display;

    $('#example').DataTable( {
        
        "fnRowCallback": function (nRow, aData, iDisplayIndex) {
 var index = iDisplayIndex +1;
$('td:eq(0)',nRow).html(index);
return nRow;
}   
        
        "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 over all pages
            total = api
                .column( 6 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Total over this page
            pageTotal = api
                .column( 6, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Update footer
            $( api.column( 6 ).footer() ).html(
                '$'+numberRenderer( pageTotal ) +' ( $'+ numberRenderer( total ) +' total)'
            );
        }
    } );
} );

This combined code prevents DataTables from working.

Here is the full code combined with a small amount of table data:

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
    
<style>
    
    body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
    </style>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
             <th>Row</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        <tfoot>
          <tr> 
             <th>Row</th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>

        <tbody>
          <tr><td>Row</td>
              
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr><td>Row</td>
              
              
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr><td>Row</td>
              
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
     
        </tbody>
      </table>
    </div>
     <script> type="text/javascript">
                
$(document).ready(function() {
  
    var numberRenderer = $.fn.dataTable.render.number( ',', '.', 2,   ).display;

    $('#example').DataTable( {
        
        "fnRowCallback": function (nRow, aData, iDisplayIndex) {
 var index = iDisplayIndex +1;
$('td:eq(0)',nRow).html(index);
return nRow;
}   
        
        "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 over all pages
            total = api
                .column( 6 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Total over this page
            pageTotal = api
                .column( 6, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Update footer
            $( api.column( 6 ).footer() ).html(
                '$'+numberRenderer( pageTotal ) +' ( $'+ numberRenderer( total ) +' total)'
            );
        }
    } );
} );
</script>
    
  </body>
</html>

If I remove either of the code blocks fnRowCallback or footerCallback the remaining code works as expected but not together. Is there away of getting both code blocks working together? Or am I on completely the wrong path?

kthorngren

If you look at the browser's console you will probably a syntax error. You need a comma separating the options, like this:

$('td:eq(0)',nRow).html(index);
return nRow;
},  // Need comma here
         
        "footerCallback": function ( row, data, start, end, display ) {

Kevin

atataylor

Wow! thanks Kevin, spent nearly two days looking for that missing comma. Your help is much appreciated and thanks for the tip on the browser console.

noerawan

Thanks kthorngren, great....! work for me, much appreciated for you.