Estoy trabajando en un pequeño proyecto, y tengo una tabla que se llena dinámicamente con información de una base de datos, a través de Ajax.
La información de esta tabla, es la información de los productos y sus respectivas cantidades que serán añadidas en una factura.
Tengo un botón "Agregar" que manda la información del producto y su cantidad a la base de datos, y el conjunto de esa información es la que se retorna a la tabla.
Lo que me gustaría saber es si hay alguna manera de que solo se recargue la información de la tabla al momento de agregar un nuevo producto a esta, ya que la única forma de que se me actualice la información es recargando totalmente la pagina, y me gustaría evitar esta situación.
Esta es la tabla donde mando a llamar esa información:
<table class="table table-striped mt-3">
<thead>
<tr>
<th class="text-center">Codigo del Producto</th>
<th class="text-center">Descripcion</th>
<th class="text-center">Precio Unitario</th>
<th class="text-center">Cantidad</th>
<th class="text-center">Precio Total</th>
</tr>
</thead>
<tbody id="tbody-tabla-temp">
</tbody>
</table>
Esta es la funcionalidad del boton agregar:
$('#btn-agregar-producto-detalle-temp').click(function(){
var parametros = "idProducto=" + $('#slc-productos-factura').val() + "&&" + "cantidad=" + $('#cantidad-producto-factura').val();
$.ajax({
url: "ajax/api.php?accion=agregar-producto-tabla-temporal",
method: "POST",
data: parametros,
dataType: "json",
success:function(respuesta){
alert('Producto añadido exitosamente');
},
error:function(e){
console.log(e)
}
});
});
Y este es el ajax donde mando a llamar toda la información:
$.ajax({
url: "ajax/api.php?accion=ver-productos-tabla-temporal",
method: "GET",
dataType: "json",
success:function(respuesta){
for(var i=0;i<respuesta.length;i++){
var totalProducto = (respuesta[i].precioVenta * respuesta[i].cantidad);
$('#tbody-tabla-temp').append(
'<tr>'+
'<th class="text-center">'+respuesta[i].idProducto+'</th>'+
'<th class="text-center">'+respuesta[i].nombre+'</th>'+
'<th class="text-center">'+respuesta[i].precioVenta+'</th>'+
'<th class="text-center">'+respuesta[i].cantidad+'</th>'+
'<th class="text-center">'+totalProducto.toFixed(2)+'</th>'+
'<th class="text-center"><button type="button" class="btn btn-danger"
onClick="eliminarProductoTemp('+respuesta[i].idProducto+')">Eliminar</button></th>'+
'</tr>'
);
}
}
});