How to display total of a column in the last row of a datatable generated using jQuery?

Question

I have created a datatable using jQuery. The table has five columns ,among one column is for payment amount. I have to display the sum of all values in the payment column at the bottom of payment amount column. How can I do that?

Below is my HTML code:

<table id="statement-table" cellpadding="0" cellspacing="0" border="0" class="wide100">
                  <thead>
                        <tr>
                            <th class="black white-active-bg pad-bottom-0-5 cursor-auto">
                            <input type="checkbox" id="select-all-statement" value="" />
                            </th>
                            <th id="stmt-column" class="black white-active-bg pad-bottom-0-5 cursor-auto">Statement</th>
                            <th id="dueDate-column"class="black white-active-bg pad-bottom-0-5 cursor-auto">Due Date</th>
                            <th id="totalDue-column" class="black white-active-bg pad-bottom-0-5 cursor-auto">Total Due</th>
                            <th id="payment-column" class="black white-active-bg pad-bottom-0-5 cursor-auto">Payment Amount</th>
                        </tr>
                        </thead>
               </table>

Below is my jquery code:

 $('#statement-table').dataTable({
         "data": json,
         "dom": 't',
         "info": false,
         "pageLength": 8,
         "columns": [
             {"data":""},
             {"data": "statementCode"},
             {"data": "dueDate"},
             {"data": "statementBalance"},
             {"data": "statementBalance"}

         ],
         "columnDefs": [
             {className: "pad-md-left-p-10 pad-top-bottom-p-10 white-active-bg mouse-link", "targets": [0,1,2,3,4]},
             {
                 'targets':   0,
                 'orderable': false,
                  'render': function(data, type, full, meta) {
                      ++index;
                          return '<input type="checkbox" id="select-checkbox'+index+'" name="payment-checkbox" class="multi-checkbox"/><label for="select-checkbox"></label>';
                  }
             },
             {
                'targets': 1,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html('<span id="pdf" class="stmt-identifier">'+sData+'</span>');
                }
             },
             {
                'targets': 2,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                $(nTd).text(date);
                }
             },
             {
                 'targets': 3,
                 'render': function (data, type, full, meta){
                     return '$'+ data;
                 }
              },
              {
                 'targets': 4,
                 'searchable':false,
                 'orderable':false,
                 'render': function (data, type, full, meta){
                     return '<span class="dollar-font">$</span>'+
                     '<input type="number" id="payement-textbox'+index+'" name="payment-textbox" min="0" max="100000" step="any" maxlength="9" class="payment" placeholder="--" value=""/>';
                 }
              }

         ],
         "aaSorting": [[2, 'desc']],

     }); //End of datatable function 

So, I need to print sum of all values of "payment-column" in the bottom of "payment column". Something like this:

Please help?

Answer 1

Please see Footer callback example on how to sum data on all pages.

For example, to calculate total for third column (zero-based column index is 2):

$('#example').DataTable( {
    "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 );

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