Datatables footerCallback関数がフッターに結果を表示しない

Question

各列の合計を取得し、その結果をフッターに表示しようとしています。私は"footerCallback"関数を使用してDatatables提供しています。しかし、それはフッターに何も表示されていない

のDataTableは

は「表がTFOOT要素を持っていない場合、このコールバック が発射されないことに注意してください。」説明します

コールバックが

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

コールバックの目的球発射されますので、だから私は、テーブルにTFOOTを追加しました：

"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

問題はフッターが見つからないことでした。

は、私はあなたが <tfoot>試合中にあなたのテーブルがあり、テーブルの見出しの番号を <th>タグの量を確保する必要が $("#monthlytable").append('<tfoot><th></th></tfoot>');

使用してフッターを追加する必要がありました。

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

Answer 2

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

：また、あなたは一例tables.Forデータを初期化する場所の上に $("#monthlytable").append('<tfoot><th></th></tfoot>');を配置する必要があり $("#monthlytable").append('<tfoot><th></th><th></th><th></th><th></th><th></th></tfoot>');

：だから5つの表の見出しは、次のような5個の<th>タグを意味し、