Quisiera actualizar mi datatable
y no tener que refrescar toda la pagina.
Tengo este formulario con la tabla:
<div class="row filaSuperior">
<div class="col-sm-3"></div>
<div class="col-md-6">
<form action="" id="formulario_productos" method="post" class="text-center" autocomplete="off">
<div class="form-group row">
<label class="col-sm-3 col-form-label">Nombre Producto:</label>
<div class="col-sm-9">
<input required type="text" class="form-control nombre_producto" style="color: #fff;" autocomplete="off" name="nombre_producto" placeholder="Nombre Producto">
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Reseña Producto:</label>
<div class="col-sm-9">
<input required type="text" class="form-control descripcion_producto" style="color: #fff;" autocomplete="off" name="descripcion_producto" placeholder="Descripcion Producto">
</div>
</div>
<div class="col-sm-3 text-center"></div>
<div class="col-sm-6 text-center">
<input type="submit" class="btn btn-success btn-block guardarProductos" onclick="name()" name="guardadoProductos" value="GUARDAR">
</div>
</form>
<div id="respuesta">
</div>
</div>
</div><br>
<div class="col-sm-3 cal"></div>
<div class="col-sm-6 text-center" id="tablaProductos">
<table class="table table-striped table-bordered dt-responsive dataTable" id="table_id">
<thead>
<tr>
<th>Nombre Producto</th>
<th>Descripcion Producto</th>
<th>Nombre Tipo Producto</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
{foreach item=Producto from=$arrayProductos}
<tr>
<th>{$Producto.nombre_producto}</th>
<th>{$Producto.descripcion_producto}</th>
<th>{$Producto.nombre_tipo_producto}</th>
<td>
<div class="row">
<div class="col-sm-4">
<button type="submit" class="btn btn-info editarProducto" name="editarProducto" id="">
<span class="glyphicon glyphicon-edit"></span>
</button>
<input type="hidden" name="id_producto" class="id_producto"value="{$Producto.id_producto}">
</div>
<div class="col-sm-4">
<button type="submit" class="btn btn-danger eliminarProducto" name="eliminar" >
<span class="glyphicon glyphicon-trash" name="borrarProducto"></span>
</button>
<input type="hidden" class="id_producto" value="{$Producto.id_producto}">
</div>
</div>
</td>
</tr>
{/foreach}
</tbody>
</table>
Y este es mi jquery
con el ajax
:
$('#formulario_productos').submit(function (event) {
event.preventDefault();
var nombre_producto = $('.nombre_producto').val();
var descripcion_producto = $('.descripcion_producto').val();
var tipo_producto = $('.tipo_producto').val();
$.ajax({
type: 'POST',
url: "save.php",
data: { nombre_producto, descripcion_producto, tipo_producto, funcion: 'guardarProducto' },
success: function (data) {
console.log("todo esta correcto");
},
error: function (data) {
console.log("erro" + data);
}
})
});
No he podido actualizar solo la tabla por lo que he estado usando location.reload()
que me refresca toda la pagina. Este es un formulario en el que almaceno productos con sus detalles y demás, ya el formulario envía correctamente los datos a la db
pero el tema de la recarga si lo veo como difícil xD.
También intenté moverme entre padres e hijos en el query
de esta forma, pero no lo logré.
$(this).parent('div').siblings('.data').reload();
Agradezco de corazón cualquier ayuda.