AngularJS Datatables insert Table-Footer with column totals - angularjs

Question

Do you know how I can easily insert a simple footer (tfoot) into my datatable?
I have build my Datatable in my Angular-Controller like this:
function Controller(DTOptionsBuilder, DTColumnBuilder, $compile) {
var ctrl = this;
ctrl.totals = {};
var initDatatable = function() {
ctrl.dtInstance = {};
ctrl.dtColumns = [
DTColumnBuilder.newColumn('id', 'Id'),
DTColumnBuilder.newColumn('title', 'Name').renderWith(actionsHtml),
// ... some columns here
];
var renderDatatable = function() {
ctrl.dtOptions = DTOptionsBuilder
.newOptions()
.withFnServerData(serverData)
.withDataProp('data')
.withOption('processing', true)
.withOption('serverSide', true)
.withOption('createdRow', createdRow)
.withOption('fnFooterCallback', footerCallback);
function createdRow(row, data, dataIndex) {
$compile(angular.element(row).contents())($scope);
}
function serverData(sSource, aoData, fnCallback, oSettings) {
// get data from Server by ajax
// and then sum the total values
ctrl.total.col1 += data1;
ctrl.total.col2 += data2;
ctrl.total.col3 += data3;
var records = {
'draw': draw,
'recordsTotal': entries.length,
'recordsFiltered': entries.length,
'data': entries // filtered data entries
};
fnCallback(records);
}
function activateDatatable() {
initDatatable();
renderDatatable();
}
activateDatatable();
}
The Code is compressed by me to see the general structure.
Now I created the function "footerCallback()" to define the table footer, but datatables doesnt generate the <tfoot> automatically and because of that I have to create it manually into the template:
<table datatable="" dt-instance="ctrl.dtInstance" dt-options="ctrl.dtOptions" dt-columns="ctrl.dtColumns" class="table table-striped table-bordered">
<tfoot>
<tr>
<th></th>
</tr>
</tfoot>
</table>
After a long time of research I find out that I should be generate every th-tag into the footer but I couldn't get my total values from serverData() to insert in the cells.
Could everyone help me?

Answer 1

i know its an old one, but for completion:
to use the footerCallback you have to change this datatables plugin sum to angularjs way. (there is a similar way with drawCallback)
.withOption('footerCallback', function () {
var api = this.api();
total = api.column(5).data()
.flatten()
.reduce( function (a,b) {
if ( typeof a === 'string' ) {a = a.replace(/[^\d.-]/g, '') * 1;}
if ( typeof b === 'string' ) {b = b.replace(/[^\d.-]/g, '') * 1;}
return a + b;
}, 0);
$( api.columns(5).footer() ).html( total );
})
you even can use render for the footer, to keep number localization (and currency). for example with the help of the datatables plugin intl
var renderit = $.fn.dataTable.render.intlNumber('fr', {style: 'currency',currency: 'EUR'} );
$( api.columns(5).footer() ).html( renderit(total,'display') );