Footer totals are NOT recalculated after destroying table and recreating?

sleewok

Hey everyone! I just recently started working with dataTables. It is a fantastic resource! However, I've seemed to hit a wall that I can't seem to figure out.

I'm generating a table using an array. I am totaling the values for each column (except the first). This works just fine with my very first load of the table. However, it does not work after destroying/recreating the table. I can recreate the table just fine, however the footers will not update/calculate properly. It will only generate the first calculated column. I've verified that my loop is going through all the columns. For whatever reason the update footer doesn't seem to work after the first column is calculated. All column footers following that first are not displayed.

I've tried completely wiping out the table to the point where destroy the table, and then the DOM for the table. I then clone a reference table and put the datatable on that. I'm at a loss...

Any ideas on what might be causing this?

Here is the code:

tableHistory = table.DataTable({
                "paging":   false,
                "scrollX": true, // horizontal scrolling
                "data":dataTable,
                "columns": tableColumns,
                "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;
                    };
                    console.log('table columns length: ' + tableColumns.length);
                    for (var i = 0; i < tableColumns.length; i++) {
                        if(i == 0) {
                            // Update footer
                            $(api.column(i).footer()).html(
                                    "TOTALS: "
                                    );
                        }
                        else {
                            // Total over all pages
                            data = api.column(i).data();
                            console.log(data);
                            total = data.length ?
                                    data.reduce(function (a, b) {
                                        return intVal(a) + intVal(b);
                                    }) :
                                    0;

                            // Update footer
                            console.log(i);
                            $(api.column(i).footer()).html(
                                    total
                                    );
                        }
                    }
                   
                }
            });

sleewok

I'm still having issues with this...anyone have any ideas? I'm getting ready to do this manually using jQuery (although I don't want to go that route).