Teddu Teddu - 4 months ago 29
jQuery Question

Datatable is showing sum for all rows, instead of currently displayed rows

I have created datatable with jQuery which has seven columns. But it has approx. 24 rows. Initially, First eight rows will be displayed. There is "show more" link at the end of table. If user click on that link then eight more rows will be displayed.
The sixth column of datatable has "due-amount" values which has class "total-due-class". I am trying to display the sum of currently displayed rows of sixth column at the bottom of page. For example, initially eight rows will be displayed , so sum of only eight rows will displayed. When user will click on "show more" link then eight more rows will be displayed, so sum of sixteen rows will be displayed.
I wrote the code, but it always display sum of all 24 rows, instead of currently displayed rows.
Below is HTML code for datatable:

<table id="multiple-account-table" cellpadding="0" cellspacing="0" class="wide100">
<thead>
<tr>
<th><input type="checkbox" id="select-all-statement" value="" /></th>
<th id="acc-num">Account Number</th>
<th id="acc-name">Account Name</th>
<th id="alias-name">Alias</th>
<th id="dueDate-column">Due Date</th>
<th id="totalDue-column" >Total Due</th>
<th id="payment-column" class="black white-active-bg pad-bottom-0-5">Payment Amount</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th>Total</th>
<th id="total-due-footer"></th>
<th id="payment-footer"></th>
</tr>
</tfoot>
</table>


Below is javascript code:

$( document ).ready(function() {
generateTable();
var sum = 0.00;
$(this).find(".total-due-class").each(function(){
var temp = $(".total-due-class").html();
sum += parseFloat(temp.substring(1));
});
$("#total-due-footer").html("$"+sum);
});


Any suggestion on this?
Below is code for jquery-datatable inside generateTable()

function generateTable(){
var index = -1;
$('#multiple-account-table').dataTable({
"data": [
{"accountNumber":"034-202553701","name":"Account 1","alias":"dummy1","dueDate":"10/19/2016","statementBalance":"34.60"},
{"accountNumber":"678-202553702","name":"Account 2","alias":"dummy 2","dueDate":"10/19/2015","statementBalance":"14.50"},
{"accountNumber":"989-202553703","name":"Account 3","alias":"Atlanta 3","dueDate":"10/19/2015","statementBalance":"15.50"},
{"accountNumber":"131-202553704","name":"Account 4","alias":"dummy4","dueDate":"10/19/2015","statementBalance":"15.50"},
{"accountNumber":"131-202553705","name":"Account 5","alias":"Atlanta 5","dueDate":"09/19/2016","statementBalance":"100.50"},
{"accountNumber":"131-202553706","name":"Account 6","alias":"Atlanta 6","dueDate":"12/19/2017","statementBalance":"18.50"},
{"accountNumber":"131-202553707","name":"Account 7","alias":"Atlanta 7","dueDate":"01/01/2015","statementBalance":"105.50"},
{"accountNumber":"131-202553708","name":"Account 8","alias":"Atlanta 8","dueDate":"10/19/2015","statementBalance":"15.50"},
{"accountNumber":"131-202553709","name":"Account 9","alias":"Atlanta 9","dueDate":"10/07/2015","statementBalance":"15.50"},
{"accountNumber":"131-202553710","name":"Account 10","alias":"Atlanta 10","dueDate":"10/19/2016","statementBalance":"15.50"},
{"accountNumber":"131-202553711","name":"Account 11","alias":"Atlanta 11","dueDate":"10/19/2015","statementBalance":"15.50"},
{"accountNumber":"131-202553712","name":"Account 12","alias":"Atlanta 12","dueDate":"04/04/2016","statementBalance":"115.50"},
{"accountNumber":"131-202553713","name":"Account 13","alias":"Atlanta 13","dueDate":"05/19/2015","statementBalance":"25.50"},
{"accountNumber":"131-202553714","name":"Account 14","alias":"Atlanta 14","dueDate":"03/19/2015","statementBalance":"135.50"},
{"accountNumber":"131-202553715","name":"Account 15","alias":"Atlanta 15","dueDate":"10/19/2017","statementBalance":"15.50"},
{"accountNumber":"131-202553716","name":"Account 16","alias":"Atlanta 16","dueDate":"10/19/2015","statementBalance":"08.50"},
{"accountNumber":"131-202553717","name":"Account 17","alias":"Atlanta 17","dueDate":"10/08/2015","statementBalance":"10.50"},
{"accountNumber":"131-202553718","name":"Account 18","alias":"Atlanta 18","dueDate":"09/19/2015","statementBalance":"15.50"},
{"accountNumber":"131-202553719","name":"Account 19","alias":"Atlanta 19","dueDate":"10/05/2015","statementBalance":"15.80"},
{"accountNumber":"131-202553720","name":"Account 20","alias":"Atlanta 20","dueDate":"10/19/2015","statementBalance":"39.50"},
{"accountNumber":"131-202553721","name":"Account 21","alias":"Atlanta 21","dueDate":"10/21/2015","statementBalance":"15.50"},
{"accountNumber":"131-202553722","name":"Account 22","alias":"Atlanta 22","dueDate":"10/19/2016","statementBalance":"15.50"},
{"accountNumber":"131-202553723","name":"Account 23","alias":"Atlanta 23","dueDate":"10/19/2015","statementBalance":"32.50"},
{"accountNumber":"131-202553724","name":"Account 24","alias":"Atlanta 24","dueDate":"12/29/2016","statementBalance":"105.50"}
],
"dom": 'it',
"pageLength": 8,
"language": {
"info": "Viewing accounts 1 - _END_ of _TOTAL_ ",
"emptyTable": "No records are available",
},
"columns": [
{"data": null},
{"data": "accountNumber"},
{"data": "name"},
{"data": "alias"},
{"data": "dueDate"},
{"data": "statementBalance"},
{"data": null}

],
"columnDefs": [
{className: "pad-md-left-p-10 pad-top-bottom-p-10 white-active-bg mouse-link", "targets": [0,1,2,3,4,5,6]},
{
'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"/>';
}
},
{
'targets': 1,
'render': function(data, type, full, meta) {
return '<span id="pdf" class="stmt-identifier">'+data+'</span>';
}
},
{
'targets': 4,
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).text(sData);
}
},
{
'targets': 5,
'orderable': false,
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html('<span class="total-due-class">$'+sData+'</span>');
}
},
{
'targets': 6,
'searchable':false,
'orderable':false,
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).html('<span class="dollar-font">$<input type="number" id="payement-textbox" class="payment" value="" name="payment-textbox" /></span>');

}
}
],
"aaSorting": [[4, 'asc'], [5,'desc'], [1,'asc'] ]

}); //End of datatable function
$('#multiple-account-table_wrapper').append('<span id="md-table-load-more" style="display: none;" class="see-more text-center pad-1 link-enabled bold">Show More</span>');
updateShowMoreLink();

}

Answer

There is an example on the datatables site that does exactly what you want.

Check it out at Footer callback example

It will calculate the sum of all columns and the columns currently shown. You are also free to modify what and how it is displayed.

EDIT:

Adding the following part to the generation process of the table:

"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 this page
    pageTotal = api
            .column(5, {page: 'current'})
            .data()
            .reduce(function (a, b) {
                return intVal(a) + intVal(b);
            }, 0);

    // Update footer
    $(api.column(5).footer()).html('$' + pageTotal);
}

and removing following part from document ready handler

var sum = 0.00;
$(this).find(".total-due-class").each(function(){
    var temp = $(".total-due-class").html();
    sum += parseFloat(temp.substring(1));
});
$("#total-due-footer").html("$"+sum);

gives me the result shown below, which should what you desired:

enter image description here