How to add a total row for some of the columns of data tables

amit_100

I am using this in options :
"footerCallback": function (row, data, start, end, display) {
var api = this.api(), data;

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

                    var   total2 = api
                                .column(4)
                                .data()
                                .reduce(function (a, b) {
                                    return intVal(a) + intVal(b);
                                }, 0);

                        $(api.column(4).footer()).html(
                                ' ( $' + total2 + ' total)'
                                );
                    };

But is not fired and no sub total for column 4 is shown in data table .

jr42.gordon

It looks like your HTML isn't correct. There is no closing '}' to your intVal function at line 5/6.

Try replacing with following:

"footerCallback": function (row, data, start, end, display) {
   var api = this.api(),
        intVal = function (i) {
              return typeof i === 'string' ?
                   i.replace(/[, Rs]|(\.\d{2})/g,"")* 1 :
                   typeof i === 'number' ?
                   i : 0;
        },
        total2 = api
            .column(4)
            .data()
            .reduce(function (a, b) {
                return intVal(a) + intVal(b);
            }, 0);
 
    $(api.column(4).footer()).html(
            ' ( $' + total2 + ' total)'
            );
};

amit_100

jr42.gordon : Yes , yo mentioned it write , I need to edit my question . a little bit now .
I had debugged my application where i am using it . I see that :

$(api.column(4).footer()).html(
' ( $' + total2 + ' total)'
);

total2 had the sum of column (4), but it not rendered on the table footer . It is not showing in UI .
Can you please help me with that .
Thanks for your response .

jr42.gordon

Here is an example using your callback http://live.datatables.net/sadipaji/1/edit?js,output . I believe it works just fine.

amit_100

                "footerCallback": function (row, data, start, end, display) {
                    var api = this.api(), data;
                    var colNumber = [3, 4, 5, 6];

                    var intVal = function (i) {
                        return typeof i === 'string' ?
                                i.replace(/[, ₹]|(\.\d{2})/g, "") * 1 :
                                typeof i === 'number' ?
                                i : 0;
                    };
                    for (i = 0; i < colNumber.length; i++) {
                        var colNo = colNumber[i];
                        var total2 = api
                                .column(colNo,{ page: 'current'})
                                .data()
                                .reduce(function (a, b) {
                                    return intVal(a) + intVal(b);
                                }, 0);
                        $(api.column(colNo).footer()).html('TOTAL '+ formatMoney(total2,2)+' ₹');
                    }
                }
            }
        });

this is my changed code as i said '$(api.column(colNo).footer()).html('TOTAL '+ formatMoney(total2,2)+' ₹');' this I can see while debugging but its not shown in table.

amit_100

I had seen your example, Its working correctly . In my project we had made the .js component of DataTable and we pass some options from our view {where we need to show datatable} . may be your .js component may have some bug .
Thank You Sir .

amit_100

after lots of debugging, tfoot is coming null from my js component .
thats why "api.column(colNo).footer()" is becoming null .
my component always giving tfoot==null.
is there any setting, through which we can we can enable tfoot always ?
Thanks in advance .

jr42.gordon

Is tfoot being provided in the HTML? In the test bed I linked to, and example I pulled from, tfoot exists in table HTML declaration.

amit_100

jr42.gordon : my custom datatable js component , does not have <tfoot> i had modified the component and added tfoot , after adding that . same code snippet worked .
do you have any idea about : https://datatables.net/forums/discussion/35099/how-to-add-custom-html-view-in-header-and-footer-in-printview
If you know please revert .
Thanks for your help