Hola tengo una dataTable en mi proyecto pero resulta que se cargan todos los registros de la base de datos de una sola vez y después me muestra la tabla con 50 resultados y eso es muy tedioso, hay alguna manera de poner un lazy loading o un spiner o una leyenda que diga cargando? Estoy usando php, mysql. He buscado en la documentación y no he encontrado nada solo unos con AJAX y a mi no me sirve porque tengo que crear un archivo aparte para usar ajax: '/path/to/script', y yo traigo todo de una consulta mysql. He visto que tiene la opción deferRender: true, pero lo mismo no me funciona.
JS
$(document).ready(function () {
$('#example').DataTable({
lengthMenu: [
[50, 100, 200, -1],
[50, 100, 200, 'Todos'],
],
deferRender: true
});
});
TABLA QUE CARGA LOS RESULTADOS DE LA BASE
<?php include('conectar.ini.php'); ?>
$conn = new mysqli($servername, $username, $password, $dbname);
$nquery=mysqli_query($conn,"select * from `personal`");
<table class="table-striped table-bordered table-hover display" id="example" width="990" align="center">
<thead>
<th width="20%"><input type="checkbox" id="todos"></th>
<th width="20%">APELLIDO</th>
<th width="15%">NOMBRE</th>
<th width="10%">CATEGORIA</th>
<th width="10%">DNI</th>
<th width="15%">VENC. DNI</th>
<th width="15%">FECHA NAC.</th>
<th width="15%">NACION.</th>
<th class="text-center">VER</th>
<th class="text-center">EDITAR</th>
<th class="text-center">ELIMIN</th>
</thead>
<tbody>
<?php
while($crow = mysqli_fetch_array($nquery)){
?>
<tr>
<td><input type='checkbox' name='usuarios[]' value='" <?php echo $crow['id_personal'] ?>"'></td>
<td><?php echo $crow['apellido']; ?></td>
<td><?php echo $crow['nombre']; ?></td>
<td><?php echo $crow['categoria']; ?></td>
<td><?php echo $crow['dni']; ?></td>
<td><?php echo $vc;?></td>
<td><?php echo $fn; ?></td>
<td><?php echo $crow['nacionalidad']; ?></td>
<!--VER PERSONAL-->
<td class='text-center'>
<a href="../ver_personal.php?id_personal=<?php echo $crow['id_personal'];?>" title="Ver Persona"><i class="fas fa-eye" style="color: #ff6318"></i></a>
</td>
<!--EDITAR PERSONAL-->
<td class='text-center'>
<a href='../editar-personal.php?id_personal=<?php echo $crow['id_personal'];?> ' title="Editar Persona">
<button type='button' class='fas fa-1x fa-edit border-0' style='color:#ff6318;'></button>
</a>
</td>
<!--ELIMINAR PERSONAL-->
<td class="text-center">
<a onclick="eliminarPersona('<?php echo $crow['id_personal'] ?>')" title="Eliminar Persona">
<button type="button" class="fas fa-1x fa-trash-alt border-0" style="color: red;"></button>
</a>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
Ojo, no tengo error de carga, lo único es que se me carga todos los registros y después hacen la paginación, y es muy tedioso, por ahora tengo solo 120 registros, me imagino cuando tenga 500, será una eternidad en cargar todo y después mostrar la tabla con la paginación. Alguien que pudo resolver eso y me pueda ayudar? Gracias de antemano.
datatables
y Por qué tus páginas con DataTables tardan tanto en cargar. También considera el uso de peticiones asíncronas conajax
ofetch
. La cantidad de datos a cargar se puede enviar como parámetros en la petición, así le dices al query de sql cuantos registros cargar y en cual registro empezar.