JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
Month:
<select id="selectMonth" class="form-select form-select-sm" aria-label=".form-select-sm example">
<option value="^(01)" selected>January</option>
<option value="^(02)">February</option>
<option value="03">March</option>
<option value="">All Months</option>
</select>
<table id="example">
<thead>
<tr>
<td>Supplies</td>
<td>Training</td>
<td>Work Orders</td>
</tr>
</thead>
<tbody>
<tr>
<td valign="top">
<table>
<tbody>
<tr>
<td class="dt-control"></td>
<td>
13.76
</td>
<td>
Stapler
</td>
<td>
01/02/2021
</td>
</tr>
<tr>
<td class="dt-control"></td>
<td>
4.26
</td>
<td>
Pen
</td>
<td>
02/05/2021
</td>
</tr>
<tr>
<td class="dt-control"></td>
<td>
1.99
</td>
<td>
Printer
</td>
<td>
03/02/2021
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table>
<tbody>
<tr>
<td class="dt-control"></td>
<td>
9.74
</td>
<td>
DBA Course
...
CSS
.dataTables_empty {
display: none;
}
table.dataTable thead th {
border-bottom: none;
}
td table.dataTable.no-footer {
border-bottom: none;
}
JavaScript
const columns = [
{ title: '' },
]
let intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
$(document).ready(function () {
$('#example').DataTable({
dom: '',
"order": [],
createdRow: function(row, data, dataIndex, cells) {
$(row).find('td table').DataTable({
columns: columns,
"paging": false,
"order": [],
dom: '',
"columnDefs":[
{
"targets": [2],
"visible": false
},
{
"targets": [3],
//"visible": false
}
]
})
}
});
//For searching all the nested datatables.
$("#Search_All").keyup(function () {
$('td table').DataTable().search(this.value).draw();
})
//Remove the header for the nested data tables (we don't need to sort them.)
$("td table thead").remove();
function updateTotals()
{
let parentTable = $('#example').DataTable();
length = parentTable.columns().nodes().length;
let mytotal = [];
let specialTable = $('td table').DataTable();
for (i = 0; i < length; i++)
{
let result = (specialTable.table(i).rows().data()
.filter(function (value, index) {
//console.log(value);
//console.log(value[3].startsWith("01"));
return value[3].startsWith("01") ? true : false;
})).reduce( function (a, b) {
return intVal(a) + intVal(b[1]);
}, 0);
console.log('sum:', result);
mytotal.push( result );
/*mytotal.push(specialTable.table(i).column(1, {search: 'applied'})
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0));
*/
console.log("MY TOTAL");
console.log(mytotal);
}
}
$('#selectMonth').change(function(){
updateTotals();
});
})