I'm using the footerCallBack and the Page Total and Total amounts are the same. Here's my code:
<script type="text/javascript" language="javascript" class="init">
$.extend( $.fn.dataTable.defaults, {
responsive: true
} );
$(document).ready(function() {
$('#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( 4 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
} );
// Total over this page
pageTotal = api
.column( 4, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 4 ).footer() ).html(
pageTotal +' ('+ total +' total)'
);
},
"language": { "infoFiltered": ""},
"order": [[ 1, "desc" ]],
"processing": true,
"serverSide": true,
"ajax": {
"url": 'scripts/server_processing_activity.php',
"data": {
formCustomer: '<?php echo $_POST["sel_customer"] ?>',
formStartDate: '<?php echo $_POST["dp3"] ?>',
formEndDate: '<?php echo $_POST["dp4"] ?>',
}
}
} );
} );
</script>
