On our service report, show group and final totals

resources/views/theme/backend/adminlte/service/report.blade.php

@@ -45,6 +45,17 @@
 						</tr>
 					@endforeach
 					</tbody>
+					<tfoot>
+					<tr>
+						<td></td>
+						<th>TOTAL:</th>
+						<td class="text-right"></td>
+						<td class="text-right"></td>
+						<td></td>
+						<td></td>
+						<td></td>
+					</tr>
+					</tfoot>
 				</table>
 			</div>
 		</div>
@@ -77,6 +88,40 @@
 				],
 				rowGroup: {
 					dataSrc: [2],
+					endRender: function (rows, group) {
+						// Remove the formatting to get integer data for summation
+						let intVal = function (i) {
+							return typeof i === 'string'
+								? i.replace(/[\$,]/g, '') * 1
+								: typeof i === 'number'
+									? i
+									: 0;
+						};
+
+						// Total over all pages
+						let month = rows
+							.data()
+							.pluck(3)
+							.reduce((a, b) => intVal(a) + intVal(b), 0);
+
+						let cost = rows
+							.data()
+							.pluck(4)
+							.reduce((a, b) => intVal(a) + intVal(b), 0);
+
+						let usage = rows
+							.data()
+							.pluck(5)
+							.reduce((a, b) => intVal(a) + intVal(b), 0);
+
+						return $('<tr/>')
+							.append('<td/>')
+							.append('<td><strong>SUB-TOTAL:</strong></td>')
+							.append('<td class="text-right"><strong>'+month.toFixed(2)+'</strong></td>')
+							.append('<td class="text-right"><strong>'+cost.toFixed(2)+'</strong></td>')
+							.append('<td class="text-right"><strong>'+usage.toFixed(2)+'</strong></td>')
+							.append('<td/>');
+					}
 				},
 				columnDefs: [
 					{
@@ -104,6 +149,46 @@
 					controls: false,
 				},
 				dom: '<"dtsp-verticalContainer"<"dtsp-verticalPanes"P><"dtsp-dataTable"Bfrtip>>',
+				footerCallback: function (row, data, start, end, display) {
+					let api = this.api();
+
+					// Remove the formatting to get integer data for summation
+					let intVal = function (i) {
+						return typeof i === 'string'
+							? i.replace(/[\$,]/g, '') * 1
+							: typeof i === 'number'
+								? i
+								: 0;
+					};
+
+					// Total over all pages
+					month = api
+						.column(3,{ search: 'applied' })
+						.data()
+						.reduce((a, b) => intVal(a) + intVal(b), 0);
+
+					// Total over this page
+					monthTotal = api
+						.column(3, { page: 'current' })
+						.data()
+						.reduce((a, b) => intVal(a) + intVal(b), 0);
+
+					// Total over all pages
+					cost = api
+						.column(4,{ search: 'applied' })
+						.data()
+						.reduce((a, b) => intVal(a) + intVal(b), 0);
+
+					// Total over this page
+					costTotal = api
+						.column(4, { page: 'current' })
+						.data()
+						.reduce((a, b) => intVal(a) + intVal(b), 0);
+
+					// Update footer
+					api.column(3).footer().innerHTML = monthTotal.toFixed(2)+'<br><small>('+month.toFixed(2)+')</small>';
+					api.column(4).footer().innerHTML = costTotal.toFixed(2)+'<br><small>('+cost.toFixed(2)+')</small>';
+				}
 			});
 		});
 	</script>