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?