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

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

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