Styjun

Using Datatables 1.10.19 and bootstrap-datepicker v1.8.0

I have two columns in my table, one contains a cash value, the other contains payment type (cash / card). What I need to do is calculate the totals for each payment type whenever the data is filtered via the datepicker.

So, when a date range is selected I need to display;

Total Cash: £x

Total Card £x

I'm already able to calculate the totals within the table, and when it's filtered via the search input, but i'm stuck on the datepicker.

I have created a fiddle here. Code is below;

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

Any help is appreciated.