add columns sum value in tfoot without html tag

lucanttdata

Hi, i have a question about calculation of sum of some columns in datatables.
my html is very simple:

<table id="storages"></table>

my javascript is

var dataSet = [
    {name: "storage101", size: 492, A: "1", B: "2", C: "Text"},
    {name: "storage102", size: 742, A: "1", B: "2", C: "Text"},
    {name: "storage103", size: 423, A: "1", B: "2", C: "Text"}
]

$.extend($.fn.dataTable.defaults, {
    sDom: '<"top">rCt<"footer"><"bottom"><"clear">'
});

$("#storages").dataTable({
    data: dataSet,
    columns: [
        {title: "Name", data: "name"},
        {title: "Size", data: "size", "className": "sum"}, // only numeric values 
        {title: "AAA", data: "A", "className": "sum"},  // only numeric values 
        {title: "BBB", data: "B", "className": "sum"},  // only numeric values 
        {title: "CCC", data: "C"}
    ],
    fnFooterCallback: function(nRow, aaData, iStart, iEnd, aiDisplay) {
        var api = this.api();
        var foot = $("#storages").find('tfoot');
            foot = $('<tfoot>').appendTo("#storages");
        
        api.columns('.sum', { page: 'current' }).every(function(x) {

                            var sum = this.data().reduce(function(a, b) {
                                var x = parseFloat(a) || 0;
                                var y = parseFloat(b) || 0;
                                return x + y;
                            }, 0);
console.log(sum);
              foot.append($('<td>'+sum+'</td>'));
                });
            
        
    }
});

i don't know if it is correct as procedure. I wish that sum values are aligned and down the column. So sum value 1657 under size, 3 under AAA, 6 under BBB. Other cells should be empty or skipped...

kthorngren

i don't know if it is correct as procedure.

Sounds like you don't have a tfoot element. You will need to add a footer either directly in HTML or using Javascript. Datatables won't automatically add the footer.

If you need help debugging your code please post a link to your page or build a running test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

lucanttdata

Ok i create i link to test
https://jsfiddle.net/lucanttdata/1dve0267/1/

kthorngren

You are appending to the footer so for each draw you will get an additional footer. See this example for how to update the footer.

If you want to add the footer using Javascript then add it once before you initialize Datatables instead of using footerCallback to create the footer. Then, using the technique in the example, the footer HTML is updated instead of appended to.

Kevin

lucanttdata

Ok but how can i add footer dynamically? Because i need to add <tfoot><tr> tag and a <td> tag for every column in table.

kthorngren

how can i add footer dynamically?

This FAQ shows one option. Are you defining the columns dynamically too?

Because i need to add <tfoot><tr> tag and a <td> tag for every column in table.

IF you want to do this in the footerCallback then you should use jQuery emptry() to clear the previous footer. Or check to see if it exists.

Kevin