Datatables Функция footerCallback не отображает результаты в нижнем колонтитуле

Question

Я стараюсь получать сумму каждого столбца и отображать результат в нижнем колонтитуле. Я использую функцию "footerCallback", которую предоставляет Datatables. Однако он не отображает ничего в сноске

DataTables объясняет

«Обратите внимание, что если таблица не имеет TFOOT элемент, этот обратный вызов не будет уволен.»

Так я добавил TFOOT к столу, так что обратного вызова будет срабатывать

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

Ответный 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)); 
} 

Я попытался с помощью "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>'); выше, где вы инициализируете данные tables.For Например:

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