Datatables show total - datatables

Question

How could I show a total of a column on datatables? I tried with the datatables doc example but I don't understand how does it works.
I tried to adapt the datatables doc example with like this:
jQuery('#tableName').DataTable({
pagingType: 'full',
lengthMenu: [
[5, 10, 25, 50, -1],
[5, 10, 25, 50, 'All'],
],
searching: true,
ordering: true,
aaSorting: [],
paging: true,
select: false,
info: true,
responsive: true,
data: [
{ col1: "col1.1", col2: 20 },
{ col1: "col1.2", col2: 30 }
],
columns: [
{ data: 'col1', title: 'col1' },
{ data: 'col2', title: 'col2' }
],
dom: 'lBfrtip',
buttons: [{
extend: 'copy',
text: '<i class="far fa-copy"></i>',
title: lang.componentSection,
footer: true
}, {
extend: 'pdf',
text: '<i class="far fa-file-pdf"></i>',
title: lang.componentSection,
footer: true
}, {
extend: 'excel',
text: '<i class="far fa-file-excel"></i>',
title: lang.componentSection,
footer: true
}, {
extend: 'print',
text: '<i class="fas fa-print"></i>',
title: lang.componentSection,
footer: true
}],
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
var total = api
.column( 1 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
var pageTotal = api
.column( 1, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 1 ).footer() ).html(
'$'+pageTotal +' ( $'+ total +' total)'
);
}
});
but I don't know how to show the results or if there's something bad. (I have no errors in console and this is a reduced example, in real datatable I get the data from ajax)
I have the total value, but I don't know how can be shown with this sintax (column defs)
I can show the total addinf the html tags with jQuery, but with this method total will not exported to pdf, excel, ...
here is the example code:
jQuery('#tableName').append('<tfoot>\
<tr>\
<th colspan="4" style="text-align:right">Total:' + pageTotal + '</th>\
<th></th>\
</tr>\
</tfoot>');

Answer 1

The only way to esport the footer is to have it painted before the datatable generation like in this simplified example:
jQuery('#' + tableName).html('<tfoot>\
<th></th>\
<th style="text-align:center; border:0.5px solid gray"></th>\
</tfoot>');
jQuery('#tableName').DataTable({
pagingType: 'full',
lengthMenu: [
[5, 10, 25, 50, -1],
[5, 10, 25, 50, 'All'],
],
searching: true,
ordering: true,
aaSorting: [],
paging: true,
select: false,
info: true,
responsive: true,
data: [
{ col1: "col1.1", col2: 20 },
{ col1: "col1.2", col2: 30 }
],
columns: [
{ data: 'col1', title: 'col1' },
{ data: 'col2', title: 'col2' }
],
dom: 'lBfrtip',
buttons: [{
extend: 'copy',
text: '<i class="far fa-copy"></i>',
title: lang.componentSection,
footer: true
}, {
extend: 'pdf',
text: '<i class="far fa-file-pdf"></i>',
title: lang.componentSection,
footer: true
}, {
extend: 'excel',
text: '<i class="far fa-file-excel"></i>',
title: lang.componentSection,
footer: true
}, {
extend: 'print',
text: '<i class="fas fa-print"></i>',
title: lang.componentSection,
footer: true
}],
footerCallback: function ( row, data, start, end, display ) {
var api = this.api(), data;
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '.')*1 :
typeof i === 'number' ?
i : 0;
};
var total = api.column( 1 ).data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
total = total.toString().replace(/[\$.]/g, ',');
jQuery(api.column( 1 ).footer()).html(total);
}
});
is important to put all of the <th></th>, because collspan doesn't exports correctly on datatables
the idea is to inject the footer with jQuery so you could destroy the table and regenerate again with the same footer (for example if you have to put that table with new columns or someting like that)
It doesn't works without api.column( 1 ).data() because if you put it with jQuery can't be exportable.