Hello my friends ... I have a query how can I calculate the total price if I increase the quantity input and / or place a discount. Through jquery
This is the code of the table
<table id="VerDetallePedido" class="table table-condensed dataTable" style="color: white;" role="grid">
<thead>
<tr role="row"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 14px;">Id</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 109px;">Descripción</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 129px;">Cantidad</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 69px;">P. Unitario</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 130px;">Descuento</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 49px;">P. Total</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 9px;"></th></tr>
</thead>
<tfoot>
<tr><th colspan="5" style="text-align:right" rowspan="1">Total:</th><th id="tdTotal" rowspan="1" colspan="1"> S/.70.50</th></tr>
</tfoot>
<tbody><tr role="row" class="odd"><td>3</td><td>Toalla LP-Color Rojo</td><td><input name="cantidad" type="number" class"form-control"="" value="1" style="color:black; text-align:center;" id="txtCantidad"></td><td>40.00</td><td><input name="descuento" type="text" class"form-control"="" value="0" style="color:black; text-align:center;" id="txtDescuento"></td><td>40.00</td><td><a class="btn btn-xs btn-danger remover"><i class="fa fa-remove"></i></a></td></tr><tr role="row" class="even"><td>4</td><td>Tomatodo-Colo blanco</td><td><input name="cantidad" type="number" class"form-control"="" value="1" style="color:black; text-align:center;" id="txtCantidad"></td><td>30.50</td><td><input name="descuento" type="text" class"form-control"="" value="0" style="color:black; text-align:center;" id="txtDescuento"></td><td>30.50</td><td><a class="btn btn-xs btn-danger remover"><i class="fa fa-remove"></i></a></td></tr></tbody></table>
In the jquery e used the Api of Datatable.net to add the rows and to obtain value of the input and to update the row I have this code
function AgregarGridDetallePagos(producto_Id) {
var t = $('#VerDetallePedido').DataTable({
paging: false,
ordering: false,
info: false,
destroy: true,
searching: false,
select: { style: 'single' },
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;
};
// Total over all pages
total = api
.column(5)
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Update footer
$(api.column(5).footer()).html(
' S/.' + (total).toFixed(2) + ''
);
$('#hdMonto').val(total);
}
});
$.ajax({
type: 'POST',
data: {'producto_Id': producto_Id },
url: '/Merchadising/Get',
success: function (msg) {
t.row.add([
msg.Id,
msg.nombreProducto + '-' + msg.descripcionProducto,
'<input name="cantidad" type="number" class"form-control" value="1" style="color:black; text-align:center;" id="txtCantidad" />',
(msg.precioVenta).toFixed(2),
'<input name="descuento" type="text" class"form-control" value="0" style="color:black; text-align:center;" id="txtDescuento" />',
(msg.precioVenta).toFixed(2),
'<a class="btn btn-xs btn-danger remover"><i class="fa fa-remove"></i></a>'
]).draw(false);
$('.remover').click(function () {
t.row($(this).parents('tr')).remove().draw();
});
$('#VerDetallePedido').on('input', ':input', function () {
var value = $(this).val(); //obtiene el valor actual del input.
var name = $(this).prop('name');
if (value.length > 0) { //si el campo no esta vacio
console.log(name + ": " + value);
}
});
notif({
type: 'success',
msg: 'Añadido correctamente.'
});
}
});
}
And as a result I get this:
