Javascript 数据表日期选择器动态计算

使用Datatables 1.10.19和bootstrap datepicker v1.8.0

我的表中有两列，一列包含现金值，另一列包含付款类型（现金/卡）。我需要做的是，每当通过datepicker筛选数据时，计算每种付款类型的总额

因此，当选择日期范围时，我需要显示

现金总额：x英镑

卡总金额：x英镑

我已经能够计算出表中的总数，当它通过搜索输入进行过滤时，但是我被日期选择器卡住了

我创造了一个新的世界。代码如下

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>

感谢您的帮助

$(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();
    });
});