jQuery DataTables 是一個基于 jQuery 的表格插件,它不僅可以讓開發者方便的創建表格,還提供了許多豐富的功能,例如分頁、排序、搜索、數據導入導出等。在開發實際項目中,我們經常需要對 DataTables 中的數據進行統計分析。下面我們將介紹一些常用的統計行功能。
// 添加匯總行
$(document).ready(function(){
$('#example').DataTable( {
"footerCallback": function ( row, 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;
};
// 總計行
var total = api
.column( 5 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// 平均值行
var avg = api
.column( 5 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 ) / api
.column( 5 )
.data()
.length;
// 在表格底部創建行,設置樣式
$( api.column( 5 ).footer() ).html(
'$'+total.toFixed(2)
);
$( api.column( 5 ).footer() ).addClass('text-bold');
$( api.column( 5 ).footer() ).next().html(
'$'+avg.toFixed(2)
);
$( api.column( 5 ).footer() ).next().addClass('text-bold');
}
} );
} );
上面這段代碼實現了一個簡單的匯總行和平均值行的統計功能。首先通過 footerCallback 回調函數獲取到 DataTables 內部對象的引用,然后通過這個引用獲取到表格中的數據,計算出總數和平均值,并將它們添加到表格底部的匯總行和平均值行。需要注意的是,這里的數據格式必須為數字類型,否則需要進行類型轉換,而且只適用于美元貨幣的格式。如果需要支持其他貨幣或者其他類型的統計,需要進行相應的修改。