使用datatable汇总列值 [英] sum column value using datatable
本文介绍了使用datatable汇总列值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将收入列值汇总到代码末尾的总数。我使用 Jquery datatable 按此代码过滤记录但无法编写总数的代码。我还尝试了数据表的页脚回调但是没有得到理想的结果。
I want to sum earning column values to the total at end of code. I am using Jquery datatable to filter records by this code but unable to write code for the total.I've also tried footer callback of datatable but doesn't get desired result.
<script src="media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
<script src="media/js/jquery-ui.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.datepicker.regional[""].dateFormat = 'dd/mm/yy';
$.datepicker.setDefaults($.datepicker.regional['']);
$('#example').dataTable({
"aoColumns": [{},
]
} )
.columnFilter({ sPlaceHolder: "head:before",
aoColumns: [ { type: "hidden" },
{ type: "hidden" },
{ type: "hidden" },
{ type: "hidden" },
{ type: "hidden" },
{ type: "hidden" },
{ type: "hidden" },
{ type: "hidden" },
{ type: "hidden" },
{ type: "date-range", sRangeFormat: "From Date{from} To Date {to}" },
{ type: "hidden" },
{ type: "hidden" },
{ type: "hidden" }
],
"fnFooterCallback": function ( nRow, aaData, iStart, iEnd, aiDisplay ) {
/*
* Calculate the total market share for all browsers in this table (ie inc. outside
* the pagination)
*/
var iTotalMarket = 0;
for ( var i=0 ; i<aaData.length ; i++ )
{
iTotalMarket += aaData[i][11]*1;
}
/* Calculate the market share for browsers on this page */
var iPageMarket = 0;
for ( var i=iStart ; i<iEnd ; i++ )
{
iPageMarket += aaData[ aiDisplay[i] ][11]*1;
}
/* Modify the footer row to match what we want */
var nCells = nRow.getElementsByTagName('th');
nCells[1].innerHTML = parseInt(iPageMarket * 100)/100 +
'% ('+ parseInt(iTotalMarket * 100)/100 +'% total)';
}
});
});
</script>
</head>
<body id="dt_example">
<div id="demo">
<table id="example" class="display">
<thead>
<tr>
<th>Agent Code</th>
<th>Agent Name</th>
<th>Designation</th>
<th>Account No.</th>
<th>Customer Name</th>
<th>Plan No.</th>
<th>Invoice</th>
<th>Bill Amt.</th>
<th>Bill Date</th>
<th>Pay Date</th>
<th>Insta. No.</th>
<th>Earning</th>
<th>Remark</th> </tr>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th style="text-align:right" colspan="11">Total:</th>
<th></th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
推荐答案
以下是解决方案： - 使用页脚回调函数做这个。
此回调在每次抽奖时运行。因此，无论何时更改表格的内容，此功能都会运行并更改页面总薪水。
Here is the solution:- Use footer callback function to do this. This callback is run on every draw. so whenever content of the table is altered this function runs and changes the on-page total salary.
<div class="container">
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
<thead>
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>500</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>200</td>
</tr>
<tr>
<td>abc</td>
<td>200</td>
</tr>
<tr>
<td>abc</td>
<td>200</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>lod</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>aeda</td>
<td>100</td>
</tr>
<tr>
<td>xyz</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>xyz</td>
<td>100</td>
</tr>
<tr>
<td>xyz</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
<tr>
<td>abc</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='2'> <span style="float:right;"id ='totalSalary'>dsada </span> </td>
</tr>
</tfoot>
</table>
</div>
<script>
$(document).ready(function() {
$('#example').dataTable({
"sPaginationType": "full_numbers",
"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_salary over all pages
total_salary = api.column( 1 ).data().reduce( function (a, b) {
return intVal(a) + intVal(b);
},0 );
// total_page_salary over this page
total_page_salary = api.column( 1, { page: 'current'} ).data().reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
total_page_salary = parseFloat(total_page_salary);
total_salary = parseFloat(total_salary);
// Update footer
$('#totalSalary').html(total_page_salary.toFixed(2)+"/"+total_salary.toFixed(2));
},
});
});
</script>
工作演示： http://jsfiddle.net/ishandemon/tb058mLq/2/
这篇关于使用datatable汇总列值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
