CODEWITHSUNDEEP
datatablesdatatables-1.10
Julie S.
Julie S.

Reputation: 127

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

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

Upvotes: 0

Views: 2700

Answers (1)

Eric Guan
Eric Guan

Reputation: 15982

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

Upvotes: 1

Related Questions