Adding The Sum Of A Field In Datatables
This question has been asked before but as an absolute beginner with JavaScript I don't know how to apply this to my code. I would like the sum for both the 'G' field and sum for t
Solution 1:
I normally do not suggest to populate DataTable with HTML source, I find this way tedious and slow.
However, assuming you want those totals to get recalculated upon each re-draw (table filtering), I'd suggest to employ drawCallback option to populate your totals:
drawCallback: () => {
// grab DataTables insurance into the variableconst table = $('#battingtbl').DataTable();
// extract all the data for all visible columnsconst tableData = table.rows({search:'applied'}).data().toArray();
// summarize row data for columns 3,4 (indexes 2, 3)const totals = tableData.reduce((total, rowData) => {
total[0] += parseFloat(rowData[2]);
total[1] += parseFloat(rowData[3]);
return total;
// starting point for reduce() totals for 2 columns equal to zero each
}, [0,0]);
// populate footer cells for columns 3, 4 (indexes 2, 3) with corresponding array total
$(table.column(2).footer()).text(totals[0]);
$(table.column(3).footer()).text(totals[1]);
}
Above requires you to append <tfoot> section to the static HTML part you prepare server-side:
<tfoot><tr><thcolspan="2">Totals:</th><th></th><th></th></tr></tfoot>So, complete example might look something, like this:
<!doctype html><html><head><scripttype="application/javascript"src="https://code.jquery.com/jquery-3.3.1.min.js"></script><scripttype="application/javascript"src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script><linktype="text/css"href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></head><body><divalign="center"><tableid = 'battingtbl'class="display compact nowrap"><thead><tr><th>YEAR</th><th>AGE</th><th>G</th><th>AB</th></tr></thead><tbody><tr><td>2016</td><td>24</td><td>15</td><td>6</td></tr><tr><td>2018</td><td>32</td><td>5</td><td>7</td></tr><tr><td>2016</td><td>28</td><td>14</td><td>9</td></tr><tr><td>2015</td><td>25</td><td>9</td><td>7</td></tr></tbody><tfoot><tr><thcolspan="2">Totals:</th><th></th><th></th></tr></tfoot></table><script>
$(document).ready(function () {
$('#battingtbl').DataTable({
"searching": true,
"pageLength": 40,
"scrollX": true,
"paging": false,
"info": false,
drawCallback: () => {
const table = $('#battingtbl').DataTable();
const tableData = table.rows({
search: 'applied'
}).data().toArray();
const totals = tableData.reduce((total, rowData) => {
total[0] += parseFloat(rowData[2]);
total[1] += parseFloat(rowData[3]);
return total;
}, [0, 0]);
$(table.column(2).footer()).text(totals[0]);
$(table.column(3).footer()).text(totals[1]);
}
})
});
</script></body></html>
Post a Comment for "Adding The Sum Of A Field In Datatables"