数据表“footerCallback”函数未在页脚中显示结果

Question

我尝试获取每列的总和并在页脚中显示结果。我正在使用 Datatables 提供的 "footerCallback" 函数。但是它没有在页脚中显示任何内容

数据表解释

"注意如果表格没有tfoot元素，这个回调 不会被解雇。”

所以我已将 tfoot 添加到表中，以便触发回调

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

回调函数：

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

我已经尝试使用 "headerCallback" 与上面相同的代码（更改为在标题中显示）并且它工作得非常好。

headerCallback 有效但 footerCallback 无效的原因是什么？

Answer 1

添加这个：

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

Answer 2

问题是没有找到页脚。

我必须使用 $("#monthlytable").append('<tfoot><th></th></tfoot>'); 添加页脚

您需要确保<tfoot> 中<th> 标记的数量与您的表格具有的表格标题数量相匹配（这还需要包括隐藏列）。所以 5 个表标题表示 5 个<th> 标签，例如： $("#monthlytable").append('<tfoot><th></th><th></th><th></th><th></th><th></th></tfoot>');

还需要在初始化数据表的地方加上$("#monthlytable").append('<tfoot><th></th></tfoot>');。例如：

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

Answer 3

//Below code worked for me
//Bootstrap table 
//Below scripts required
<script src="http://code.jquery.com/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);
                  });
                }
            } );

Answer 4

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