我正在生成库存报告，并根据选择下拉列表更改数据表。但是，实际的问题是我想过滤每个列的选项并计算该列各端的总和。第二件事是，当我过滤数据时，还按过滤器行显示总和。
我已经在使用一些代码和技术来解决此问题，但在此方面我并不成功。
我的实际代码在这里：
1）。 HTML表格代码：
<table class="table table-striped" id="ABCTable">
<thead>
<tr>
<th>Sr.No.</th>
<th>Role</th>
<th>Percentage</th>
<th>Total Order</th>
<th>TotalSales</th>
<th>Total Target</th>
<th>Total Status</th>
<th>Order Count</th>
<th>Action</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Sr.No.</th>
<th>Role</th>
<th>Percentage</th>
<th>Total Order</th>
<th>TotalSales</th>
<th>Total Target</th>
<th>Total Status</th>
<th>Order Count</th>
<th>Action</th>
</tr>
</tfoot>
<tbody id="ABCBody">
<?php if(count($result) > 0) { ?>
<?php
$final_total_order = 0;
$final_total_sales = 0;
$final_total_target = 0;
$final_total_status = 0;
$final_total_count = 0;
$final_total_percentage = 0;
foreach($result as $fkey => $fvalue) {
$final_total_order += $fvalue['total_order'];
$final_total_sales += $fvalue['total_sales'];
$final_total_target += $fvalue['total_target'];
$final_total_status += $fvalue['total_status'];
$final_total_count += $fvalue['order_count'];
}
foreach($result as $key => $value) {
?>
<tr>
<td><?php echo $key + 1; ?></td>
<td><a href="#"><?php echo $value['role']; ?></a></td>
<td><?php
$percentage = ($value['total_sales']*100)/$final_total_current_sales;
echo $percentage.'%';
$final_total_percentage += $percentage;
?></td>
<td><a href="#"><?php echo $value['total_order']; ?></a></td>
<td><?php echo $value['total_sales']; ?></td>
<td><?php echo $value['total_target']; ?></td>
<td><?php echo $value['total_status']; ?></td>
<td><a href="#"><?php echo $value['order_count']; ?></a></td>
<td></td>
</tr>
<?php } ?>
<?php } else { ?>
<tr><td colspan=7 style='text-align:center;'>No record found</td></tr>
<?php } ?>
</tbody>
<tfoot>
<tr style="background-color: antiquewhite;">
<td></td>
<td><b>TOTAL</b></td>
<td id="per"><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td><b></b></td>
<td></td>
</tr>
</tfoot>
</table>
2）。 J查询数据表js代码：
var ABCTable = function () {
var table = $('#ABCTable');
// begin first table
table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "No entries found",
"infoFiltered": "(filtered1 from _MAX_ total entries)",
"lengthMenu": "Show _MENU_ entries",
"search": "Search:",
"zeroRecords": "No matching records found"
},
// Or you can use remote translation file
//"language": {
// url: '//cdn.datatables.net/plug-ins/3cfcc339e89/i18n/Portuguese.json'
//},
// Uncomment below line("dom" parameter) to fix the dropdown overflow issue in the datatable cells. The default datatable layout
// setup uses scrollable div(table-scrollable) with overflow:auto to enable vertical scroll(see: assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js).
// So when dropdowns used the scrollable div should be removed.
//"dom": "<'row'<'col-md-6 col-sm-12'l><'col-md-6 col-sm-12'f>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",
"bStateSave": false, // save datatable state(pagination, sort, etc) in cookie.
"columns": [{
"orderable": false
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": true
}, {
"orderable": false
},{
"orderable": false
}],
"lengthMenu": [
[10, 20, 50, -1],
[10, 20, 50, "All"] // change per page values here
],
// set the initial value
"pageLength": 10,
"pagingType": "bootstrap_full_number",
"language": {
"search": "Full Search: ",
"lengthMenu": " _MENU_ records",
"paginate": {
"previous":"Prev",
"next": "Next",
"last": "Last",
"first": "First"
}
},
"columnDefs": [{ // set default column settings
'orderable': true,
'targets': ["ALL"]
}, {
"searchable": true,
"targets": ["ALL"]
}],
"order": [
[1, "asc"]
], // set first column as a default sort by asc
/* "fnFooterCallback": function ( nRow, aaData, iDataStart, iDataEnd ) {
console.log('nRow'+nRow);
console.log('aaData'+aaData[0]);
console.log('iDataStart'+iDataStart);
console.log('iDataEnd'+iDataEnd);
/* Calculate the total market share for all browsers in this table (ie inc. outside
* the pagination
*/
/*var ipercentage = 0;
for ( var i=0 ; i<aaData.length ; i++ )
{
ipercentage += aaData[i][2];
}*/
/* Calculate the market share for browsers on this page */
/*var iPageMarket = 0;
for ( var i=iDataStart ; i<iDataEnd ; i++ )
{
iPageMarket += aaData[i][4]*1;
}*/
/* Modify the footer row to match what we want */
/*var nCells = nRow.getElementsByTagName('th');
$('#per').html(ipercentage+'%');
}*/
});
var tableWrapper = jQuery('#ABCTable_wrapper');
table.find('.group-checkable').change(function () {
var set = jQuery(this).attr("data-set");
var checked = jQuery(this).is(":checked");
jQuery(set).each(function () {
if (checked) {
$(this).attr("checked", true);
} else {
$(this).attr("checked", false);
}
});
jQuery.uniform.update(set);
});
tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
$('#DraftTable tfoot th').each(function (i)
{
var title = $('#ABCTable tfoot th').eq($(this).index()).text();
// or just var title = $('#sample_3 thead th').text();
var serach = '<input type="text" placeholder="Search ' + title + '" />';
$(this).html('');
$(serach).appendTo(this).keyup(function(){table.fnFilter($(this).val(),i)})
});
}
下面的结构显示输出的最终视图：
Sr. No. | name | percentage | revived order | order count
filter-1| filter-2 | filter-3 | filter-4 | filter-5
1 | ABC | 100 | 562 | 10
2 | XYZ | 0 | 236 | 4
TOTAL | 100 | 798 | 14
过滤数据时：
Sr. No. | name | percentage | revived order | order count
filter-1| filter-2 | filter-3 | 236 (enter filter value) | filter-5
1 | XYZ | 0 | 236 | 4
TOTAL | 0 | 236 | 4