How to display total of a column in the last row of a datatable generated using jQuery? -
i have created datatable using jquery. table has 5 columns ,among 1 column payment amount. have display sum of values in payment column @ bottom of payment amount column. how can that?
below 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 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, need print sum of values of "payment-column" in bottom of "payment column". this:
please help?
please see footer callback example on how sum data on pages.
for example, calculate total third column (zero-based column index 2):
$('#example').datatable( { "footercallback": function ( row, data, start, end, display ) { var api = this.api(), data; // remove formatting integer data summation var intval = function ( ) { return typeof === 'string' ? i.replace(/[\$,]/g, '')*1 : typeof === 'number' ? : 0; }; // total on pages total = api .column( 2 ) .data() .reduce( function (a, b) { return intval(a) + intval(b); }, 0 ); // update footer $( api.column( 2 ).footer() ).html('$' + total); } } );
Comments
Post a Comment