Datatables “footerCallback” function not displaying result in two columns in footer (only in one)

Question

I tried to use my existing code which works for one single column sum to get the sum to show up in two columns - I tried to put them in an array but it's not working. Is it not possible to use a simple array solution for this ?

This is the https://jsfiddle.net/setbon/3mvmhL1v/

This is the JS:

 $(document).ready(function() {
var table = $('#example').DataTable( {
    rowReorder: {
    selector: 'td:nth-child(2)'
  },
  responsive: true,
  scrollX: true,
  scrollY: "80vh",
    scrollCollapse: true,
        paging: true,
  lengthChange: false,
  lengthMenu: [ [10, 25, -1], [10, 25, "All"] ],
  "order": [[ 0, "asc" ]],
  "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
        total = api
            .column( [3,4] )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( [3,4], { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( [3,4] ).footer() ).html(
            total
        );
    },
    buttons: ['pdf']
} );

table.buttons().container()
    .appendTo( '#example_wrapper .small-6.columns:eq(0)' );

} ); $(document).foundation();

Because I wish to sum more than one column am I now required to use an additional plugin per https://datatables.net/plug-ins/api/sum() ? Even for that plugin I have not been able to locate an example featuring more than one column summed up that I can copy and easily customize.

In this SO question the code is very different than what I have and confuses me. Also this SO answer is difficult for me to understand and I don't know how to apply to resolve my problem

Eric Guan · Accepted Answer · 2017-02-21T17:04:39.267

1

Working example: https://jsfiddle.net/guanzo/wx5mr9vs/1/

If i understand you correctly, you want the same sum in 2 columns. This is easily achieved, you don't need a plugin.

First, one of your rows, numbered 8, has "Tokyo" instead of a number for salary. This is why you have $NaN in your jsfiddle.

Second, api.column() is used for selecting a single column. To select multiple columns, simply make the function call plural, api.columns([3,4]) and it should work. In your provided jsFiddle, you only have 4 columns, meaning you don't have a 4th column index, so i did

$( api.columns([2,3]).footer() ).html(
    '$'+total
);

The documentation is well organized: https://datatables.net/reference/api/

EDIT: Each column footer contains it's own sum

https://jsfiddle.net/3mvmhL1v/4/

Basically you need to perform the summing operation on each column individually. Combining the sum for both columns into a single variable won't help you.

var sumColumns = [3,4]

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

    // Update footer
    $( api.columns(colIndex).footer() ).html(
        total
    );
})

edited Feb 21 '17 at 17:04

answered Feb 21 '17 at 05:01

Eric Guan

15,474
8
50
61

Eric, I'm sorry for some reason the Fiddle had not saved the updated version I had made. See newly saved: https://jsfiddle.net/setbon/3mvmhL1v/ You should see only 3 rows and the sums should be two separate sums - not the same in 2 columns. I made the function calls a plural but am now getting zeros everywhere.. Could you take another look ? – Julie S. Feb 21 '17 at 13:41
all good now thank you! Just curious why did you move the first part to be above :" $(document).ready(function() {" ? Can't the " // Remove the formatting to get integer data for summation" section be after the " $(document).ready(function() {" for the action to work ? – Julie S. Feb 21 '17 at 19:25
Declaring functions is independent of the document being "ready". If you call the function before the document is ready, and it depends on the document, that's when you run into trouble. Since this function doesn't depend on the document, there's no problem. You only need to declare this function once, you can call it a billion times. The "footerCallback" function is called many times. So if "intVal" was left inside "footerCallback", you would be redeclaring the function each time, unnecessarily. In the grand scheme of things it's insignificant, it's just good practice to not repeat yourself. – Eric Guan Feb 21 '17 at 19:35

Datatables “footerCallback” function not displaying result in two columns in footer (only in one)

1 Answers1