使用数据表1.10.19和bootstrap-datepicker v1.8.0
我的表格中有两列，一列包含现金值，另一列包含付款类型（现金/卡）。我需要做的是计算每次通过日期选择器过滤数据时每种付款方式的总数。
因此，当选择日期范围时，我需要显示；
现金总额：£x
总卡£x
我已经能够计算表格中的总数，以及何时通过搜索输入对其进行过滤，但是我被日期选择器卡住了。
我创建了一个fiddle here。代码在下面；
html
<div class="container">
<div class="col-md-4 pull-right">
<div class="input-group input-daterange">
<input class="form-control date-range-filter" data-date-format="dd-mm-yyyy" id="min-date" placeholder="From:" type="text">
<div class="input-group-addon">
to
</div><input class="form-control date-range-filter" data-date-format="dd-mm-yyyy" id="max-date" placeholder="To:" type="text">
</div>
</div>
</div>
<hr>
<p>Overall Totals: <span id="overallTotals"></span></p>
<p>Filtered Totals: <span id="filteredTotals"></span></p>
<hr>
<table class="table table-striped table-bordered" id="records" style="width:100%">
<thead>
<tr>
<th>Date Paid</th>
<th>Invoice</th>
<th>Amount</th>
<th>Charge Type</th>
<th>Payment Type</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr class="odd" role="row">
<td class="sorting_1">27-03-2019</td>
<td>521735</td>
<td>0.20</td>
<td>overdue</td>
<td>Card</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">27-03-2019</td>
<td>513938</td>
<td>1.20</td>
<td>overdue</td>
<td>Cash</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">27-03-2019</td>
<td>523693</td>
<td>0.20</td>
<td>overdue</td>
<td>Cash</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">27-03-2019</td>
<td>493645</td>
<td>0.10</td>
<td>overdue renewed</td>
<td>Cash</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">27-03-2019</td>
<td>521734</td>
<td>0.20</td>
<td>overdue</td>
<td>Card</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">27-03-2019</td>
<td>493646</td>
<td>0.10</td>
<td>overdue renewed</td>
<td>Cash</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">27-03-2019</td>
<td>523691</td>
<td>0.10</td>
<td>overdue renewed</td>
<td>Card</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">27-03-2019</td>
<td>523692</td>
<td>0.10</td>
<td>overdue renewed</td>
<td>Card</td>
</tr>
<tr class="odd" role="row">
<td class="sorting_1">27-03-2019</td>
<td>523694</td>
<td>0.20</td>
<td>overdue</td>
<td>Cash</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">26-03-2019</td>
<td>506326</td>
<td>1.20</td>
<td>overdue</td>
<td>Card</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">26-03-2019</td>
<td>506322</td>
<td>1.60</td>
<td>overdue</td>
<td>Card</td>
</tr>
<tr class="even" role="row">
<td class="sorting_1">25-03-2019</td>
<td>506399</td>
<td>5.20</td>
<td>overdue</td>
<td>Card</td>
</tr>
</tbody>
</table>
js
$(document).ready(function() {
// Bootstrap datepicker
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
var table = $('#records').DataTable({
"order": [
[0, "desc"]
],
"columns": [{
data: 'datePaid',
}, {
data: 'invoice',
}, {
data: 'amount',
"render": function(data, type, row) {
return '£' + Number(data).toFixed(2);
},
}, {
data: 'chargeType'
}, {
data: 'paymentType'
}, ],
"columnDefs": [{
targets: [0],
type: 'date-eu'
}],
"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;
};
// find column named Amount
var costColumnIndex = $('th').filter(function(i) {
return $(this).text() == 'Amount';
}).first().index();
// array of total column values
var totalData = api.column(costColumnIndex).data();
// total of column values
var total = totalData.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0).toFixed(2);
// array of displayed column values
var pageTotalData = api.column(costColumnIndex, {
page: 'current'
}).data();
// total of displayed values
var pageTotal = pageTotalData.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0).toFixed(2);
// array of displayed column values
var searchTotalData = api.column(costColumnIndex, {
'filter': 'applied'
}).data();
// total of displayed values
var searchTotal = searchTotalData.reduce(function(a, b) {
return intVal(a) + intVal(b);
}, 0).toFixed(2);
// console.log(searchTotal);
$('#overallTotals').html('Approximate page total £' + pageTotal + ', search total £' + searchTotal + ', totally total $' + total);
$('#filteredTotals').html('Cash total £' + 'x' + ', Card total £' + 'x');
$(api.column(2).footer()).html('£' + Number(pageTotal).toFixed(2));
},
});
// Extend dataTables search
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
var min = $('#min-date').val();
var max = $('#max-date').val();
var createdAt = data[0] || 0; // Our date column in the table
createdAt = moment(createdAt, "DD-MM-YYYY").format('MM/DD/YYYY');
min = min ? moment(min, "DD-MM-YYYY").format('MM/DD/YYYY') : "";
max = max ? moment(max, "DD-MM-YYYY").format('MM/DD/YYYY') : "";
if (
(min == "" || max == "") || (moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))) {
return true;
}
return false;
});
// Re-draw the table when the a date range filter changes
$('.date-range-filter').change(function() {
$('#records').DataTable().draw();
});
});
感谢您的帮助。