jQuery DataTable是一種非常常用的可擴(kuò)展、高性能和交互式的數(shù)據(jù)表格組件,可以幫助我們快速地以多種方式操作和處理數(shù)據(jù)。其中,總和(sum)是一個十分常用的概念。
// 代碼示例 var table = $('#example').DataTable({ // ... "footerCallback": function ( row, 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( 4 ) .data() .reduce( function (a, b) { return intVal(a) + intVal(b); }, 0 ); // Update footer $( api.column( 4 ).footer() ).html( '$'+total.toFixed(2) ); } });
以上代碼是一個常見的總和操作,它通過DataTables中的column()
方法來獲取想要計算總和的列,之后通過reduce()
方法和intVal()
方法來計算總和。
需要注意的是,intVal()
方法用于格式化數(shù)據(jù),將一些類似于$100.00這樣的字符串轉(zhuǎn)化為數(shù)值形式。同時,footerCallback
回調(diào)函數(shù)會在表格輸出完畢后調(diào)用,可以將總和顯示在表格底部。
上一篇個人主頁用css
下一篇個人博客主頁代碼用CSS