Soy nuevo en el desarrollo y trato de crear una tabla de datos con JSON. hasta ahora lo hice
{ "qty": "2", "price": 1 }, { "qty": "3", "price": "5", }, { "qty": "3", "price": "4", } var table = $('#example').DataTable({ data: dataSet, columns: [{ title: "qty", data: "qty" }, { title: "price", data: "price", render: function(data, type, row) { return '<input type="number" value="' + data + '">'; }, { title: "total", data: "multiplication'} } ]Quiero realizar la multiplicación de la cantidad y el precio de dos filas y almacenar el resultado en la tercera fila.
Aquí hay una solución simple que puede hacer esto con la opción columnDefs:
En la definición de su columna, agregue una tercera columna de datos con el valor null . (Recuerde tener el número de columnas que coincidan en su HTML). Creé una tercera columna HTML con el <th>Total</th> . La tabla dejará la columna vacía.
Cuando llegue a columnDef, querrá asegurarse de apuntar a la columna correcta, recuerde que los lee en función de un índice 0, por lo que 2 es en realidad 3.
columnDefs: [{ "targets": 2, "render": function(data, type, full, meta) { return type === 'display' ? ((full.qty)*(full.price)) + '' : data; } Recuerde, el parámetro completo son los datos de toda la fila, por lo que en la devolución de su representación, multiplica los dos valores de datos (full.qty)*(full.price)
var dataSet = [ { "qty": "2", "price": "1", }, { "qty": "3", "price": "5" }, { "qty": "3", "price": "4" }] var table = $('#example').DataTable({ data: dataSet, columns: [ {"data" : "qty"}, {"data": "price"}, {"data" : null} ], columnDefs: [{ "targets": 2, "render": function(data, type, full, meta) { return "$" + ((full.qty)*(full.price)); } }] }); td { text-align: center !important; } <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css"/> <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Quantity</th> <th>Price</th> <th>Total</th> </tr> </thead> <tbody> </tbody> </table>Considere otro ejemplo.
$(function() { var dataSet = [{ "qty": 2, "price": 1.00, }, { "qty": 3, "price": 5.99 }, { "qty": 3, "price": 4.00 } ]; function calcTotal(q, p) { var t = 0.00; t = parseInt(q) * parseFloat(p); return t.toFixed(2); } $.each(dataSet, function(i, r) { r.total = calcTotal(r.qty, r.price); }); var table = $('#example').DataTable({ data: dataSet, columns: [{ "data": "qty" }, { "data": "price", "render": function(data, type, row) { return '$<input type="number" class="price-input" min="0.00" step="0.01" value="' + data + '" />'; } }, { "data": "total", "render": function(data, type, row) { return "$" + data; } } ] }); $("#example").on("change", ".price-input", function(event) { var row = $(this).closest("tr"); var qty = table.cell($("td", row).eq(0)).data(); var price = $(this).val(); var total = table.cell($("td", row).eq(2).get(0)); total.data(calcTotal(qty, price)).draw(); }); }); td { text-align: center !important; } .price-input { width: 5em; } <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css" /> <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Quantity</th> <th>Price</th> <th>Total</th> </tr> </thead> <tbody> </tbody> </table> Esto actualiza el conjunto de datos antes de construir la tabla. Así que los valores ya están ahí. Luego puede usar una devolución de llamada de change para modificar esos datos.
Nota: La mayoría de las interfaces quieren cambiar la Cantidad y no el precio, pero como su ejemplo cambió el Precio, lo mantuve como está. Puede modificar esto fácilmente para que funcione al revés.