2

Uso datatable para listar unos datos traídos desde una base de datos el cual tengo un botón para editar, que al oprimir me muestra una ventana modal, el cual busco la forma que apenas se actualizo se actualice esa tabla sin tener que recargar la pagina..
intente en el DONErealizar nuevamente un ajax para listar los datos pero me los duplica..¿que alternativa puede existir para que apenas actualice ese dato no tenga que oprimir f5 y ni usar window.location en javascript?

ASI ES COMO LISTO LOS DATOS EN EL DATATABLE

 table_students= $('#table').DataTable({             

                        "columnDefs": [
                            {
                                "targets": [ 0 ],
                                "visible": false,
                                "searchable": false
                            },                  
                        ],

                    });

    $.ajax({
                    url: 'list_students',
                    type: 'POST',
                })
            .done(function(response)
            {
                var answer= $.parseJSON(response);

                for (var i = answer.length - 1; i >= 0; i--) 
                {
                    var rowNode = table_students
                    .row.add([
                                answer[i].stu_id,
                                answer[i].stu_nombre,
                                answer[i].stu_apellido,
                                answer[i].stu_correo,
                                '<center><button type="button" name="updatestudent" id="updatestudent" class="btn btn-warning"></button>',                              
                            ])                     
                        .draw()
                    .node();
                }
            })
            .fail(function() {
                console.log("error");
            });


ASI ES COMO ACTUALIZO

 $("#updatestudent").submit(function() 
            {
                event.preventDefault();
                var data = $(this).serializeArray();

                $.ajax({
                    url: 'data_updatestudent',
                    type: 'POST',
                    data: data,
                })
                .done(function(response) {
                    var answer= $.parseJSON(response);
                    if(answer)
                    {
                        $('#ModalUpdate').modal('hide');
                         alert("datos actualizados");

                    }
                    else
                    {
                        alert("error");
                    }

                })
                .fail(function() {
                    console.log("error");
                })          
            });


Agradeceria el interes.

3 respuestas 3

2

No incluiste el código con que estás instanciando tu DataTable, pero suponiendo que estás cargando los datos con un llamado ajax:

var table = $('#example').DataTable( {
    ajax: "/table.php?id=1"
});

El refresco se gatilla con:

table.ajax.reload();

El método reload acepta dos parámetros opcionales. El primero, una función callback que se ejecutará cuando el reload se complete. El segundo, un booleano que especifica si al refrescar te devuelve a la primera página o te mantiene la página donde estás parado (por página me refiero a la navegación de la tabla, no del browser).

Por tu caso de uso, me imagino que querrías hacer

table.ajax.reload(null,false);

Este llamado tendrías que hacerlo junto con el ocultamiento del modal.

Referencia: ajax.reload()

3
  • Hola @amenadiel gracias por tu interes, intente probar tu codigo y me aparece este error "DataTables warning: table id=example - Invalid JSON response", no se si depronto sepas de que manera pueda solucionarlo.
    – JDavid
    Commented el 15 feb. 2017 a las 13:01
  • Pero no tienes que usar el código literal que te estoy mostrando. Tienes que adaptarlo al ID de tu tabla, y a la url de tu endpoint Ajax. Si no estás cargando los datos por ajax, entonces no se podrá refrescar.
    – ffflabs
    Commented el 15 feb. 2017 a las 13:06
  • si, entiendo, pero por razones obvias literalmente no estoy usando tu trozo del codigo al 100% solo lo que me conviene, aparte de eso yo en el llamado de ajax no estoy enviando parametros, el hace un select directo
    – JDavid
    Commented el 15 feb. 2017 a las 13:12
0
<script type="text/javascript">
var table;
$(document).ready(function () {
    table = $("#table").DataTable({
        'ajax': {
            'type': 'GET',
            'url': 'url',//Url del archivo que recibe tus datos
            'data': {'id': ''}//Solo si solicitas un dato en especifico
        },
        'columns': [
            {"data": ""}//Tu Informacion que vas a plasmar en tu tabla
        ]
    });
});
$("#updatestudent").submit(function() 
{
        event.preventDefault();
        var data = $(this).serializeArray();

        $.ajax({
            url: 'data_updatestudent',
            type: 'POST',
            data: data,
        })
        .done(function(response) {
            var answer= $.parseJSON(response);
            if(answer)
            {
                $('#ModalUpdate').modal('hide');
                 alert("datos actualizados");
                 table.ajax.reload();//Podrias colocarlo dentro del success o done para recargar la tabla
            }
            else
            {
                alert("error");
            }

        })
        .fail(function() {
            console.log("error");
        })          
});
</script>

Podrías intentar este código, ya lo he hecho y funciona bastante bien, obviamente adaptado al tuyo.

7
  • Hola @Juan Carlos Garcia gracias por tu interes, hice los mismo con tu codigo y me aparece este error "DataTables warning: table id=example - Invalid JSON response", no se si depronto sepas de que manera pueda solucionarlo.
    – JDavid
    Commented el 15 feb. 2017 a las 13:02
  • Pues la respuesta que debes de obtener por parte del servidor deberia ser la siguiente para ser valida { "data": [ { "name": "Tiger Nixon", "position": "System Architect", "salary": "$320,800", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }] } Commented el 15 feb. 2017 a las 14:01
  • Hola @Juan Carlos Garcia gracias por responder y que pena molestarte, he actualizado la publicacion, lo que sucede esque yo no listo mis datos directamnete desde el datatable sino que hago una ajax por fuera de el que igualemente es funcional, entonces como podria hacer directamente con mi codigo sin tener que usar "data": [{...}], por que igual intente pero tendria que hacer modificaciones en el php para que envie un array en ciclo por medio del json para que datatables tome todos los valores entonces no requiero sino de la manera como yo lo uso....Te agradezco. Saludos
    – JDavid
    Commented el 15 feb. 2017 a las 14:08
  • @Daniel , Pues la respuesta que debes de obtener por parte del servidor deberia ser la siguiente para ser valida { "data": [ { "name": "Tiger Nixon", "position": "System Architect", "salary": "$320,800", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }] }, donde "name" es igual al nombre de la columna de tu tubla donde consultas, para obtener este resultado en JSON, si ocupas PHP podria ser de la siguiente manera, json_encode(array("data" => array("**Tu resultado**"))) Commented el 15 feb. 2017 a las 14:09
  • no existe otra alternativa para no tener que usar esto? { "data": [ { "name": "Tiger Nixon", "position": "System Architect", "salary": "$320,800", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }] }....hice lo siguiente, cree una funcion "listar_datos(){ dentro de esta funcion puse el ajax que lista los datos al datatable}, e intente poner esa funcion dentro del done del ajax de actualizar de la siguiente manera listar_datos().ajax.reload() pero lo que sucede esuqe se recarga la tabla pero duplica los datos y no los muestra todas.habra depronto alguna opcion para acomodarlo?
    – JDavid
    Commented el 15 feb. 2017 a las 14:14
0

Una solución rápida es que al guardar los datos ejecutar el método de carga de DataTable o ejecutarlo después de cerrar la modal. Por ejemplo:

$("#idModal").on('hidden.bs.modal', function() {
        DataTableCargaDatos();
    });

esto hace que se ejecute cualquier método al cerrar la modal. Espero te sirva

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.