数据表“footerCallback”功能在页脚中不显示结果 [英] Datatables "footerCallback" function not displaying results in footer

问题描述

我尝试得到每列的总和，并在页脚中显示结果。我正在使用Datatables提供的footerCallback功能。但是在页脚中没有显示任何内容

数据表解释

注意如果表没有tfoot元素，这个回调
将不会被触发。

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

 < table id =monthlytableclass =displaycellspacing = 0width =100％> 
< thead>< / thead>< tfoot>< / tfoot>< / table> 
  

回调功能：

 footerCallback：function（tfoot，data，start，end，display）{
 var api = this.api（），data; 
 
 //删除格式以获得求和的整数数据
 var intVal = function（i）{
 return typeof i ==='string'？ 
 i.replace（/ [\ $，] / g，''）* 1：
 typeof i ==='number'？ 
 i：0; 
}; 
 
 //所有页面总共
 total = api 
 .column（3）
 .data（）
 .reduce（function（a，b ）{
 return intVal（a）+ intVal（b）; 
}，0）; 
 
 //更新页脚
 var numFormat = $ .fn.dataTable.render.number（'\，'，'。'，2，'£'）.display; 
 $（api.column（3）.footer（））.html（numFormat（total））; 
} 
  

我尝试使用headerCallback code>具有与上述相同的代码（改为显示在标题中），它的工作原理很好。

是否有一个原因，为什么headerCallback工作，但不是footerCallback

解决方案

问题是没有找到页脚。

<我不得不使用 $（＃monthlytable）添加页脚。append（'< tfoot>< th>< / th>< / tfoot>'）;

您需要确保$ $ c $内的< th> c>< tfoot> 匹配表格的表格标题数量。所以5个表标题表示5 < th> 标签，例如：
$（＃monthlytable）。append（'< ; tfoot>< th>< th>< th>< th>< th>< / th>< th>< / th& / t code $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $'''''''''''''''''''''''' < tfoot>< th>< / th>< / tfoot>'）; 以上，您初始化数据表。例如：

  $（＃monthlytable）。append（'< tfoot>< th>< / th>< / tfoot>'）; 
 var table = $（'＃monthlytable'）。DataTable（{
 // datatable elements 
}）; 
  

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?

解决方案

The problem was the footer wasn't be 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. 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 
});

这篇关于数据表“footerCallback”功能在页脚中不显示结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！