0

Buenas tardes,

Estaba usando el plugin de jquery DataTables sin AJAX y me funcionaba perfectamente, pero ahora lo he pasado todo a ajax para el CRUD y no sé como usarlo con AJAX.

Este es el código de la vista:

<table class="table table-striped table-bordered table-hover" id="solicitudinfo" data-order='[[ 0, "desc" ]]'>
<script type="text/javascript">

    $(document).ready(function(){
        getSolInfo();
    });

</script>
    <thead>
        <tr>
            <th>ID</th>
            <th>Fecha</th>
            <th>Centro</th>
            <th>Nombre</th>
            <th>Curso</th>
            <th>Edad</th>
            <th>Contacto</th>
            <th>Etiquetas</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody id="tBody">

    </tbody>
</table>

Y el AJAX:

function getSolInfo() {
    $('#tBody').html('');
    $.ajax({            
        type : 'POST',
        url  : '../assets/webla/getsolicitudes.php',
        success :  function(data) {
            $('#tBody').append(data);
        },
        complete: function(){
           setTimeout(function() {
           }, 15000);    
        }
    });
    return false; 
}

El código para coger los datos:

<?php

    require_once("../classes/class.solicitudinfo.php");
    require_once("../functions.php");

    $solinfo = new SolicitudInfo;

    $solinfo->getSolicitudes();

?>

Y la función de la clase:

    public function getSolicitudes() {


        $sql = $this->db->prepare("SELECT * FROM webla_solicitudinfo ORDER BY IDSolicitud DESC");
        $result = $sql->execute();
        $result = $sql->fetchAll();

    $totalsolicitudes = count($result);
    if ($totalsolicitudes > 0){
        foreach ($result as $solinfo){ 
?>
    <tr>
        <td><?php echo $solinfo['IDSolicitud']; ?></td>
        <td><?php echo $solinfo['DiaSolicitud']; ?><br><?php echo $solinfo['HoraSolicitud']; ?></td>
        <td><?php echo $solinfo['Centro']; ?></td>
        <td><?php echo $solinfo['Nombre']; ?>  <?php echo $solinfo['Apellidos']; ?></td>
        <td><?php echo $solinfo['CursoEscolar']; ?></td>
        <td><?php echo getAge($solinfo['FechaNacimiento']); ?> años</td>
        <td><i class="fa fa-phone-square" aria-hidden="true"></i> <?php echo $solinfo['MovilContacto']; ?><br><i class="fa fa-envelope" aria-hidden="true"></i> <?php echo $solinfo['EmailContacto']; ?></td>
        <td><span class="label label-default green" style="background-color:#32C5D2;border-radius: 5px !important;">Nueva Solicitud</span></td>
        <td>
            <a class="btneliminarsolinfo btn" data-id="<?php echo $solinfo['IDSolicitud']; ?>" data-action="remove" style="background-color:#FF0206;border: 0px !important;color:white;" data-toggle="confirmation" title="¿Eliminar Solicitud?" data-singleton="true"> <i class="fa fa-trash" aria-hidden="true"></i> </a>
            <a class="btnversolinfo btn" data-id="<?php echo $solinfo['IDSolicitud']; ?>" data-action="ver" style="background-color:#1b9e1d;border: 0px !important;color:white;"> <i class="fa fa-eye" aria-hidden="true"></i> </a>
            <a class="btneditarsolinfo btn" data-id="<?php echo $solinfo['IDSolicitud']; ?>" data-action="editar" style="background-color:#5172F3;border: 0px !important;color:white;"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i> </a>
            <a class="btnetiquetarsolinfo btn" data-id="<?php echo $solinfo['IDSolicitud']; ?>" data-action="etiquetar" style="background-color:#EDC30F;border: 0px !important;color:white;"> <i class="fa fa-tags" aria-hidden="true"></i> </a>
            <div id="resultado-mi-formulario"></div>
        </td>
    </tr>
<?php   
            }
        }   
    }

¿Cómo tendría que hacer para usar el plugin DataTables?

1 respuesta 1

1

Debes colocar el código de tu DataTable justamente después de llenar la tabla con la información:

function getSolInfo() {
    $('#tBody').html('');
    $.ajax({            
        type : 'POST',
        url  : '../assets/webla/getsolicitudes.php',
        success :  function(data) {
            $('#tBody').append(data);

            $('#solicitudinfo').DataTable();
        },
        complete: function(){
           setTimeout(function() {
           }, 15000);    
        }
    });
    return false; 
}

Espero que te sirva, saludos !

3
  • Funciona perfectamente! Muchas gracias!
    – Charlie
    el 9 oct. 2017 a las 19:48
  • Genial, te invito a que marques la respuesta como aceptada para que los futuros desarrolladores sepan que fue una solución correcta al problema y lo puedan implementar. Me alegra que te sirviera, Saludos ! el 9 oct. 2017 a las 19:55
  • perfecto,,, gracias, me mate como dos dias, pero bueno se tiene la recompensa el 6 mar. 2019 a las 22:03

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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