1

**

Hola buen dia, quería saber si se puede "recargar" una tabla implementada con el plugin Datatables sin tener que recargar la pagina.

Tengo una tabla con una columna de "Acciones" que tiene dos , uno para editar la información de esa persona y otro para activar/desactivar el estatus de esa persona. Lo que quiero es que al activar/desactivar a esa persona me recargue la tabla y cambie el icono que le asigne a ese <a></a> sin tener que actualizar la pagina manualmente (F5). Hasta ahora mi solución fue poner un window.location.href="mismapagina"; para simular eso, pero no me parece correcto.

introducir la descripción de la imagen aquí

PD: Al presionar el icono activar/desactivar puse una ventana de confirmación utilizando sweetAlert2.js donde si es true, ejecuto el window.location, sino no hago nada.

LISTADO HTML:

<section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">

            <!-- /.box-header -->
            <div class="box-body">
              <table id="registros" class="table table-bordered table-striped">
                <thead>
                <tr>
                  <th width="10%">Acciones</th>
                  <th>Materia</th>
                  <th>Creditos</th>
                  <th>Cuatrimestre</th>
                  <th width="10%">Estatus</th>
                </tr>
                </thead>
                <tbody>
                <?php
                try{
                    $sql="SELECT idmateria, nombre, creditos, siglas, idcuatrimestre, estatus from materia order by idcuatrimestre, idmateria asc ";
                    $resultado=$conn->query($sql);
                }catch (Exception $e){
                    $error = $e->getMessage();
                    echo $error;
                }
                while ($admin=$resultado->fetch_assoc()){?>
                    <tr>
                        <td width="10%">
                            <a href="editar-materias.php?id=<?php echo $admin['idmateria'];?>" class="btn bg-orange mb btn-flat ">
                                <i class="fa fa-pencil-alt"></i>
                            </a>
                            <?php if ($admin['estatus']){ ?>
                                <a href="#" data-id="<?php echo $admin['idmateria']?>;" data-tipo="materia" title="Desactivar usuario" class="btn bg-green-gradient mb  btn-flat  desactivar_registro">
                                    <i class="fas fa-toggle-on"></i>
                                </a>
                            <?php } else { ?>
                                <a href="#" data-id="<?php echo $admin['idmateria']?>;" data-tipo="materia" title="Activar usuario" class="btn bg-gray mb  btn-flat  activar_registro">
                                    <i class="fas fa-toggle-off"></i>
                                </a>
                            <?php } ?>


                        </td>
                        <td><?php echo $admin['nombre'];?></td>
                        <td><?php echo $admin['creditos'];?></td>
                        <td><?php echo $admin['idcuatrimestre'];?></td>
                        <?php if ($admin['estatus']){ ?>
                            <td width="10%"><span class="label bg-green-active">ACTIVO</span></td>
                        <?php } else { ?>
                            <td width="10%"><span class="label bg-gray-active">INACTIVO</span></td>
                        <?php } ?>
                    </tr>
                    <?php }?>


                </tbody>
                <tfoot>
                <tr>
                    <th>Acciones</th>
                    <th>Materia</th>
                    <th>Creditos</th>
                    <th>Cuatrimestre</th>
                    <th width="10%">Estatus</th>
                </tr>
                </tfoot>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>

Codigo Datatable (Este codigo lo puse en un .js aparte porque lo reutilizo para todas las tablas que tengo, todas tienen el mismo id):

$(document).ready(function () {
    $('#registros').dataTable({
        dom: 'lBfrtip',
        buttons: [
            'copy', 'csv', 'excel',
            {
                extend      : 'pdfHtml5',
                orientation : 'landscape',
                pageSize    : 'LEGAL'
            }
        ],
        'paging'      : true,
        'lengthChange': true,
        'searching'   : true,
        'ordering'    : true,
        'info'        : true,
        'autoWidth'   : false,
        'language'    :{
            sProcessing:     "Procesando...",
            sLengthMenu:     "Mostrar   _MENU_ registros",
            sZeroRecords:    "No se encontraron resultados",
            sEmptyTable:     "Ningún dato disponible en esta tabla",
            sInfo:           "Mostrando _END_ de un total de _TOTAL_ registros",
            sInfoEmpty:      "Mostrando _END_ de un total de 0 registros",
            sInfoFiltered:   "(filtrado de un total de _MAX_ registros)",
            sInfoPostFix:    "",
            sSearch:         "Buscar:",
            sUrl:            "",
            sInfoThousands:  ",",
            sLoadingRecords: "Cargando...",
            oPaginate: {
                sFirst:    "Primero",
                sLast:     "Último",
                sNext:     "Siguiente",
                sPrevious: "Anterior"
            },
            oAria: {
                "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }

        },

    }).DataTable();
    $('#registros').wrap("<div class='scrolledTable'></div>");
});

Código activar/desactivar:

function activarRegistro() {
    $('.activar_registro').on('click', function (e) {
        e.preventDefault();

        var id = $(this).attr('data-id');
        var tipo = $(this).attr('data-tipo');

        const swalWithBootstrapButtons = swal.mixin({
            confirmButtonClass: 'btn btn-success',
            cancelButtonClass: 'btn btn-danger',
            buttonsStyling: true,
        })

        swalWithBootstrapButtons({
            title: '¿Activar usuario?',
            text: "Activara el usuario seleccionado",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Activar',
            cancelButtonText: 'Cancelar',
            reverseButtons: false
        }).then((result) => {
            if (result.value) {

                $.ajax({
                    type: 'post',
                    data: {
                        'id': id,
                        'registro' : 'activar'
                    },
                    url: '../funciones/modelo-'+tipo+'.php',
                    success: function(e) {
                        var resultado = JSON.parse(e);
                        if (resultado.respuesta == 'exito') {
                            swal(
                                '¡Activado!',
                                'El usuario ha sido activado.',
                                'success'
                            )
                            // jQuery('[data-id="'+ resultado.id_eliminado +'"]').parents('tr').remove();
                            window.location.href="listado-alumnos.php";
                        }else{
                            swal(
                                '¡Error!',
                                'El usuario no se pudo activar',
                                'error'
                            )
                        }
                    },
                    error: function (e) {
                        console.log("Error: "+e.responseText);
                    }

                })
            } else if (
                // Read more about handling dismissals
                result.dismiss === swal.DismissReason.cancel
            ) {
                swalWithBootstrapButtons(
                    'Cancelado',
                    'No se realizó ningún cambio',
                    'error'
                )
            }
        })

    });
}

function desactivarRegistro() {
    $('.desactivar_registro').on('click', function (e) {
        e.preventDefault();

        var id = $(this).attr('data-id');
        var tipo = $(this).attr('data-tipo');

        const swalWithBootstrapButtons = swal.mixin({
            confirmButtonClass: 'btn btn-success',
            cancelButtonClass: 'btn btn-danger',
            buttonsStyling: true,
        })

        swalWithBootstrapButtons({
            title: '¿Desactivar usuario?',
            text: "Desactivara el usuario seleccionado",
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Desactivar',
            cancelButtonText: 'Cancelar',
            reverseButtons: false
        }).then((result) => {
            if (result.value) {

                $.ajax({
                    type: 'post',
                    data: {
                        'id': id,
                        'registro' : 'desactivar'
                    },
                    url: '../funciones/modelo-'+tipo+'.php',
                    success: function(e) {
                        var resultado = JSON.parse(e);
                        if (resultado.respuesta == 'exito') {
                            swal(
                                '¡Desactivado!',
                                'El usuario ha sido desactivado.',
                                'success'
                            )
                            window.location.href="listado-alumnos.php";
                        }else{
                            swal(
                                '¡Error!',
                                'El usuario no se pudo desactivar',
                                'error'
                            )
                        }
                    },
                    error: function (e) {
                        console.log("Error: "+e.responseText);
                    }

                })
            } else if (
                // Read more about handling dismissals
                result.dismiss === swal.DismissReason.cancel
            ) {
                swalWithBootstrapButtons(
                    'Cancelado',
                    'No se realizó ningún cambio',
                    'error'
                )
            }
        })

    });
}

2 respuestas 2

1

Tuve un problema parecido con DataTable solo que para realizar una búsqueda, la solución fue, en el success

  1. "Destruir la tabla"
  2. Llamar la respuesta de ajax
  3. Volver a construir la tabla.

ejemplo.

success: function (respuesta) {
        /*Destruimos la tabla*/
        $("#registros").dataTable().fnDestroy();

        //*Mostramos la respuesta en la tabla*//
        $('#registros').html(respuesta);

          /*Se crea la tabla nuevamente*/
        $('#registros').DataTable({
            "info": true,
            "searching": true
        });
    }

con esto se debería poder ver los cambios en el DataTable sin necesidad de recargar la pagina.

2
  • 1
    Al activar/desactivar destruye la tabla pero no la crea y manda este error en consola: Uncaught TypeError: Cannot read property 'aDataSort' of undefined
    – Member
    Commented el 30 jul. 2018 a las 22:20
  • 1
    Es importante que su THEAD no esté vacío en la tabla. El dataTable requiere que especifique el número de columnas de los datos esperados. Según sus datos debería de ser <thead> <tr> <th width="10%">Acciones</th> <th>Materia</th> <th>Creditos</th> <th>Cuatrimestre</th> <th width="10%">Estatus</th> </tr> </thead> en su archivo "modelo-'+tipo+'.php" Commented el 30 jul. 2018 a las 22:50
1

Para empezar que te parece llenar tu tabla con un archivo php aparte de esta manera

var table = $('#registros').DataTable({
  // Otra configuracion
  ajax: {
    url: 'archivo.php'
  },
  columns: [
    { data: 'Acciones' },
    { data: 'Materias' },
    { data: 'Creditos' },
    { data: 'Cuatrimestres' },
    { data: 'Estatus' }
  ]
});

EL archivo phpestaria respondiendo de esta manera

// Tu consulta
$data = array();
if ($result) {
  while($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
  }
}
echo json_encode(array('data' => $data));

Ahora para tu etiqueta de estatus se ocupara render que al recargar la pagina puedes colocar una condicional que evaluara y de acuerdo al dato mostrara la etiqueta correspondiente.

function setEstatus(data, type, row, meta) {    
    let xClass = "",
        msg    = "";
    if(data){
        xClass = "green"
        msg    = "ACTIVO"
    }else{
        xClass = "gray"
        msg    = "ACTIVO"
    }
    return data = `<span class="label bg-${xClass}-active">${msg}</span>`;    
}

Y asi para poder decirle a dataTable que ocupe tu render en una columna seria de esta manera

{ data: 'Estatus' ,render: setEstatus}

Con esto en tu funcion activar y desactivar registro le haras un refresh ala tabla cargara los nuevos datos y render hara lo suyo, espero no haberte enredado y ojala te funcione

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.