Forked Datatable with computation
sum of product of two columns
https://stackoverflow.com/questions/46984173/how-to-multiply-and-sum-2-columns-of-datatables-using-jquery-datatables
by Prashant Pokhriyal
HTML
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<table class="display" id="example">
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>NSP</th>
<th>Closing Balance</th>
<th>Date</th>
<th>NSP * Closing Balance</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>NSP</th>
<th>Closing Balance</th>
<th>Date</th>
<th>NSP * Closing Balance</th>
</tr>
</tfoot>
<tbody></tbody>
</table>
<label>Total</label>
<input type="text" id="total" class="form-control" readonly value="0.0" />
JavaScript
$(document).ready(function() {
$.each(dataSet, function(i, it) {
console.log(it);
it.rowTotal = it.nsp * it.closing_balance;
});
// Table definition
var dtapi = $('#example').DataTable({
data: dataSet,
"deferRender": false,
"footerCallback": function(tfoot, data, start, end, display) {
var api = this.api();
var p = api.column(5).data().reduce(function(a, b) {
return a + b;
}, 0)
$(api.column(5).footer()).html(p);
$("#total").val(p);
},
"order": [1],
"columns": [
// rest of the columns
{
data: "id"
}, {
data: "product_name"
}, {
data: "nsp"
}, {
data: "closing_balance",
}, {
data: "date",
}, {
data: "rowTotal"
}
]
});
});
// DataTable data set used
var dataSet = [{
"id": "Airi",
"product_name": "Satou",
"nsp": 230,
"closing_balance": 23,
"date": "28th Nov 08",
}, {
"id": "Angelica",
"product_name": "Ramos",
"nsp": "191",
"closing_balance": 131,
"date": "9th Oct 09",
}, {
"id": "Ashton",
"product_name": "Cox",
"nsp": 191,
"closing_balance": 37,
"date": "12th Jan 09",
}];