Sum of column of DataTables.net table in footer

Question

I am having problems with tiny granularity by inserting the sum value of each column with the class "sum" into the footer.

The code (more or less used directly from DataTables.net) goes:

var table = $('#example').DataTable(); table.columns('.sum').each(function (el) { var sum = table .column(el) .data() .reduce(function (a, b) { return parseInt(a, 10) + parseInt(b, 10); }); $(el).html('Sum: ' + sum); }); 

"sum" has the correct meaning, but is somehow not inserted in the footer! That is, its -element appears empty.

Note that the snapshot below works fine, but I want to sum each column with the class sum.

 var table = $('#example').DataTable(); var column = table.column(4); $(column.footer()).html( column.data().reduce(function (a, b) { return parseInt(a, 10) + parseInt(b, 10); }) ); 

//////////////////////////////////////////////// //////////////////////////////////

EDIT - Workaround:

I moved the code to where the DataTable is initialized, and instead went off with footerCallback. See below code:

 "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('.sum', { page: 'current' }) .data() .reduce(function (a, b) { return intVal(a) + intVal(b); }, 0); // Update footer $(api.column('.sum').footer()).html(pageTotal); } 

Somehow now the value is inserted into the right tfoot element. I still don’t know why this will not work in the first place (but, as mentioned in the comment, the order of including JS files could be related to some of them).

Now I just need to figure out how to loop multiple columns using class = "sum" ...

Answer 1

Your table manipulation code should only run when initializing a DataTable (see the initComplete property.)

Also make sure you have a <tfoot></tfoot> block defined in your <table> , otherwise the footer will not.

Otherwise, you were very close to the solution, see the adjusted code below:

 var table = $('#ticketTable').DataTable({ 'initComplete': function (settings, json){ this.api().columns('.sum').every(function(){ var column = this; var sum = column .data() .reduce(function (a, b) { a = parseInt(a, 10); if(isNaN(a)){ a = 0; } b = parseInt(b, 10); if(isNaN(b)){ b = 0; } return a + b; }); $(column.footer()).html('Sum: ' + sum); }); } }); 

See this JSFiddle for an example.

UPDATE

There is also a footerCallback property that allows you to define a footer display callback function that will be called on every draw event.

The difference between initComplete and footerCallback is that initComplete is called once and footerCallback on each draw event.

If you show the sum for the whole table, initComplete should be enough. Otherwise, if you need to show in the footer data that applies only to the current page (as in the callback example below), use footerCallback instead.

Answer 2

Mix Empty replaced by 0

 "initComplete": function (settings, json) { this.api().columns('.sum').every(function () { var column = this; var intVal = function (i) { return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0; }; var sum = column .data() .reduce(function (a, b) { return intVal(a) + intVal(b); }); $(column.footer()).html('Sum: ' + sum); }); }