Sum selected columns with columns().every() in footerCallback

PatrickG42

Hi,

I am trying to sum the columns with a given class and
for the current page with columns().every() using the footerCallback:

$('#example').DataTable({
    ajax: "/products/table",
    columns: [
        { data: "Category" },
        { data: "Name" },
        { data: "Quantity", className: "sum" },
        { data: "Price", className: "sum" },
        {
            data: null,
            className: "sum",
            render: function(data, type, row) {
                return data.Quantity * data.Price;
            }
        }
    ],
    "footerCallback": function(row, data, start, end, display) {
        var api = this.api();
        api.columns('.sum', { page: 'current' }).every(function () {
            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);
            // Update footer
        $(this.footer()).html(sum);
    });
}

The footer contains the sum of two of the three columns with the sum class,
the last column which also has the sum class shows 0 in the footer!?

http://live.datatables.net/cuhukumu/1/edit?js,output

While debugging on my local system I saw the function is executed for every
column at initialisation/reload. When changing page then the function
is executed only for the columns with the sum class as expected.

This behaviour is not reproduced on DataTables Live where the function is always
executed only on the columns with the sum class.

I used 'DataTables' package latest version on NuGet (1.10.9).
Then saw the latest version is now 1.10.10, tried it, no change.

What am I doing wrong for the last column footer to remain at 0?

Any idea why the function would be executed for all columns at init/reload?

allan

The issue is that there is no data for the final column. You've got columns.data as null for it and the column().data() method will get the raw data.

It looks like you want to use cells().render() in order to get the rendered data. You can do that like this: http://live.datatables.net/cuhukumu/2/edit .

Allan

PatrickG42

Thanks a million!
That solved the column which did not have the sum in the footer.

About the function being called more times than expected, I found that it is due to the footerCallback being called twice when an ajax dataSource is used.

I do not know how to test with an ajax data source on DataTables Live.

When running this:

http://live.datatables.net/cuhukumu/3/edit

the console shows:

"in footerCallback"
"2 51"
"3 55"
"4 96"

Running thr exact same code on my system gives the save result.
But when I switch back to my ajax datasource, the console shows:

"in footerCallback"
"2 0"
"3 0"
"4 0"
"in footerCallback"
"2 51"
"3 55"
"4 96"

Is this an expected behaviour or is there something I should fix?

Thanks!

allan

That is expected - there is an initial draw that occurs before the Ajax data has loaded (since, by its very nature it is async) and then another draw once the data has loaded.

Allan

PatrickG42

Thanks!