1

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:

enter image description here

Please help?

Shubhangi Garg
  • 109
  • 5
  • 17
  • Please post a functional example that illustrates your problem on [jsFiddle](http://jsfiddle.net/). Thanks! – palaѕн Jul 11 '16 at 12:01
  • I think you can use pure `HTML` input for the `dataTable` plugin instead of the `JSON` input. There you can add the extra row for displaying the toal – Sherin Jose Jul 11 '16 at 12:22

1 Answers1

3

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);
    }
} );
Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
  • hi what if i want total for multiple column – Arijit Mukherjee Jun 21 '17 at 08:02
  • @ArijitMukherjee, just calculate total value for another column similar to how `total` is calculated and then display their sum in the footer. – Gyrocode.com Jun 21 '17 at 12:07
  • you mean i need to write `total = api .column( 2 ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 );` this code for each column? is their any other elegant way to do it? – Arijit Mukherjee Jun 23 '17 at 05:55
  • For multiple columns, you could use css for the columns whose column total is required. [link](http://live.datatables.net/cuhukumu/2/edit) gave me a good start. Other important information from Gyrocode.com's answer at [link](https://stackoverflow.com/questions/27918051/datatables-net-table-column-sum-in-footer) especially to get integer data from formated values. Additional info from [link](https://datatables.net/forums/discussion/31799/sum-selected-columns-with-columns-every-in-footercallback#Comment_85827) also eased my implementation. Good Luck – Muzoora Savior Jul 02 '17 at 18:50