Question

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

数据表解释

＆＃34;注意，如果表没有tfoot元素，则此回调不会被解雇。＆＃34;

所以我已经将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

问题是未找到页脚。

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

添加页脚

您需要确保<th>中<tfoot>个代码的数量与您的表格所包含的表格标题数量相匹配（这也需要包含隐藏的列）。因此，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 2

添加此内容：

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

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

数据表＆＃34; footerCallback＆＃34;功能不在页脚中显示结果

4 个答案: