Datatables之表头和表尾

Datatables的表头使用<thead>标签定义，表尾使用<tfoot>标签定义，一般表格的表头用于显示每一列的名称，表尾一般情况下不需要，但是也有特殊情况，比如说使用表尾统计某一列的数据总和，并根据搜索的不同，统计的数据可是实时变化。要实现这一功能，可以通过调用footerCallback(tfoot, data, start, end, display)回调函数来实现，这个回调函数用来处理tfoot的每一次重绘事件，如果没有tfoot，此回调函数不会被执行。PS：当然对于表头也有headerCallback(tfoot, data, start, end, display)回调函数。

//使用reduce()方法实现统计功能，使用之前记得先设置表尾
$('#example').dataTable( {
  "footerCallback": function( tfoot, data, start, end, display ) {
    var api = this.api();
    $( api.column( 5 ).footer() ).html( //统计第5列的数据
        api.column( 5 ).data().reduce( function ( a, b ) {
            return (Number)a + (Number)b;
        } )
    );
  }
} );

注意上面的(Number)不能省略，如果省略了将会变成字符串的连接，比如a=1、b=2，那么return的结果将会是12，实现的就不是统计功能了。

另外，使用该统计功能不用担心数据的来源问题，如果数据来自于服务器端，那么统计的数据也会随着服务器端加载过来的数据动态变化。