0

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.

1
  • Una forma de hacerlo es consultar con ajax y que te devuelva los datos que vas a colocar en la tabla en formato json, y lo insertas en la tabla, es algo extenso pero es una forma de hacerlo
    – DaxTter77
    Commented el 26 sept. 2019 a las 18:27

1 respuesta 1

0

Podrías poner todo el tbody en un helper, e inyectarlo con sus datos cada vez que lo requieras, si es que quieres refrescar toda la información desde bd con ajax. O como te comentan, agregar o eliminar sólo un elemento trow según la operación que hagas, en el tbody.

1
  • 2
    Hola, las respuestas sin código son consideradas de baja calidad. Revisa esta sección para que conozcas como escribir buenas respuestas.
    – DjCrazy
    Commented el 26 sept. 2019 a las 18:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.