From reading the DataTables.net wiki I found how to add a Total to one column, column 4 in the syntax below, so I am sure someone with extensive JQuery experience could easily adapt to show a total for columns 6 - 12 for me.
This is the base set-up to add a total for column 4 - what would be altered to add a total for an additional column?
https://datatables.net/examples/advanced_init/footer_callback.html
$(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);
}, 0 );
// 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)'
);
}
} );
} );
Some quick refactoring allows for a callable function with any column number. You will notice that I:
column 4
into a function with one
parameter representing the column to sum up colNum
. 4
within the new function to colNum
and$(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;
};
var totalColumn = function(colNum) {
// Total over all pages
total = api
.column(colNum)
.data()
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total over this page
pageTotal = api
.column(colNum, {
page: 'current'
})
.data()
.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0);
// Update footer
$(api.column(colNum).footer()).html(
'$' + pageTotal + ' ( $' + total + ' total)'
);
}
totalColumn(6);
totalColumn(7);
//...snip...
}
});
});