Footer Aggregate For Computed Column

ShayDesh

Hello, I am having an issue where the suggested method of summing a column and placing it in the footer is not working for my computed column. I suspect it is because the data for the this column is null For example this is what my column looks like

{
    data: null,
    'render': function (data, type, full, meta) {
        var doubles = full['InvoiceTotal'] * 2;
        return doubles;
     }
}

The code I am using to sum the column in the footer callback looks like this

"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;
                };

                // Total over all pages
              
                  var total = api
                    .column(11)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

               $(api.column(0).footer()).html("Double Total:");
               $(api.column(1).footer()).html(accounting.formatMoney(total));
},

I do have a column aggregate that is working fine on the same table using the same method that is not a computed column. Is there a way to aggregate my computed column?

kthorngren

I think this thread will help you out:
https://datatables.net/forums/discussion/21742/api-column-data-call-on-rendered-column

Kevin

ShayDesh

Thank you, that totally worked. Instead of using .data() use .cache('search') Like

               var total = api
                    .column(11)
                    .cache('search')
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                     }, 0);

allan

An even better option is to use cells().render() - e.g.:

var total = api
     .cells(null, 11)
     .render('search')
     .reduce(function (a, b) {
         return intVal(a) + intVal(b);
      }, 0);

Why cells().render() over column().cache()? Because the search cache won't be populated if you have disable search on the table.

Allan

ShayDesh

Thank you Allen, I did try to implement the cells().render() method while trying to solve this but I don't think I was doing it right. I am going to give it a go now with your example.