Make a footer becomes dynamic in all reports

mary_me

Hi Allan,

This is my first time to use the DataTables. Now, we need to implement this in all our reports but I'm having a problem with my footer. This code works perfectly, but I need to assign this code dynamically. My plan is whenever the developer added the <tfoot> it will automatically call this code to add Total at the bottom of the page. Also, set the column he wants to total.

Below is my code:

$('#myTable').dataTable({

"fnFooterCallback": function (nRow, aasData, iStart, iEnd, aiDisplay ) { 

$($(nRow).children()).remove();                            
for(var i=0;i<aasData[0].length;i++){                       
    var a= document.createElement('th'); 
    if(i == 0){
        $(a).html('Total');                                         
    }else{
         $(a).html('');      
    }
          $(nRow).append(a);                                 
}                                                          
var columnas=[1,2,3,4];    //the columns you wish to add             
for(var j in columnas) {                                   
    var columnaActual= columnas[j];

        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };    

    var total=0;                                           
    for(var i=iStart;i<iEnd;i++){ 
        var notformatedtotal = intVal(aasData[aiDisplay[i]][columnaActual]);    
        total=total+parseFloat(notformatedtotal);
    }  
    if (total > Math.floor(total)) {
         total1 = ReplaceNumberWithCommas(total);
         $($(nRow).children().get(columnaActual)).html('$' + ' ' +total1); 

    }else{
         total1 = numberWithCommas(total);
         $($(nRow).children().get(columnaActual)).html(total1); 
    }
}                                                          

}
});

Please help me. I'm working this on the whole day but yet no luck.