javascript - Datatables "footerCallback" function not displaying results in footer - Stack Overflow

admin管理员组

文章数量:1290983

I am try to get a sum of each column and display the result in the footer. I'm using "footerCallback" function that Datatables provides. However it is not displaying anything in the footer

Datatables explains

"Note that if the table does not have a tfoot element, this callback will not be fired."

So I've added tfoot to the table so the callback will be fired

<table id="monthlytable" class="display" cellspacing="0" width="100%">  
<thead></thead><tfoot></tfoot></table>

Callback funtion:

"footerCallback": function ( tfoot, 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 )
  .data()
  .reduce( function (a, b) {
        return intVal(a) + intVal(b);
    }, 0 );

// Update footer
var numFormat = $.fn.dataTable.render.number( '\,', '.', 2, '£' ).display;
    $( api.column( 3 ).footer() ).html(numFormat(total));
}

I've tried using "headerCallback" with the same code as above (altered to display in the header) and it works perfectly fine.

Is there a reason why headerCallback works but not footerCallback?

I am try to get a sum of each column and display the result in the footer. I'm using "footerCallback" function that Datatables provides. However it is not displaying anything in the footer

Datatables explains

"Note that if the table does not have a tfoot element, this callback will not be fired."

So I've added tfoot to the table so the callback will be fired

<table id="monthlytable" class="display" cellspacing="0" width="100%">  
<thead></thead><tfoot></tfoot></table>

Callback funtion:

"footerCallback": function ( tfoot, 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 )
  .data()
  .reduce( function (a, b) {
        return intVal(a) + intVal(b);
    }, 0 );

// Update footer
var numFormat = $.fn.dataTable.render.number( '\,', '.', 2, '£' ).display;
    $( api.column( 3 ).footer() ).html(numFormat(total));
}

I've tried using "headerCallback" with the same code as above (altered to display in the header) and it works perfectly fine.

Is there a reason why headerCallback works but not footerCallback?

• javascript
• jquery
• html
• datatable
• callback

Share Improve this question Follow edited Feb 1, 2017 at 15:40 neophyte 6,62422 gold badges3131 silver badges4343 bronze badges asked Feb 1, 2017 at 15:34 A.HollingsworthA.Hollingsworth 8911 gold badge22 silver badges1212 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Add this:

buttons: [{ extend: 'print',
            footer: true }]

The problem was the footer wasn't found.

I had to add the footer using $("#monthlytable").append('<tfoot><th></th></tfoot>');

You need to ensure the amount of <th> tags within the <tfoot> match the number of table headings your table has (This also needs to include hidden columns). So 5 table headings means 5 <th> tags, such as: $("#monthlytable").append('<tfoot><th></th><th></th><th></th><th></th><th></th></tfoot>');

You also need to put $("#monthlytable").append('<tfoot><th></th></tfoot>'); above where you initialise data tables.For example:

$("#monthlytable").append('<tfoot><th></th></tfoot>');
var table = $('#monthlytable').DataTable({
// datatable elements 
});

//Below code worked for me
//Bootstrap table 
//Below scripts required
<script src="http://code.jquery./jquery-1.9.1.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
$('#divID').html('<table id="tableID"><tr><th>head</th></tr><thead></thead><tbody><tr><td>some data</td</tr><tfoot><tr id="foot"></tr><tfoot></tbody></table>');

var table = $('#tableID').DataTable( {
                    "dom": '<"top"if>t<"bottom"><"clear">',
                    "bSort": false,
                    "paging": false,
                    "bFilter": false,
                "footerCallback": function(row, data, start, end, display) {
                  var api = this.api();
                 var rcnt=0;
                  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); //alert(sum);

                    if(rcnt==0){
                        $("#foot").append('<td style="background:#a1eaed;color:black; text-align: center;">Total</td>');
                    }else{
                        $("#foot").append('<td style="background:#a1eaed;color:black; text-align: center;">'+sum+'</td>');
                    }
                    rcnt++;
                    //$(this.footer()).html(sum);
                  });
                }
            } );

  "footerCallback": function ( row, data, start, end, display ) {
                          var api = this.api();
                          nb_cols = api.columns().nodes().length;
                          var j = 2;
                          while(j < nb_cols){
                            var pageTotal = api
                                  .column( j, { page: 'current'} )
                                  .data()
                                  .reduce( function (a, b) {
                                      return Number(Number(a) + Number(b)).toFixed(2);
                                  }, 0 );
                              // Update footer
                              $( api.column( j ).footer() ).html(pageTotal);
                            j++;
                          }
                        },

本文标签： javascriptDatatables quotfooterCallbackquot function not displaying results in footerStack Overflow