Estoy trabajando con PHP y MYSQL, en mi sistema tengo una tabla para mostrar una lista de usuarios, quise implementar DATATABLE para agregar filtros y otras opciones de búsqueda a cada columna. Lo implementé y logré que funcionara en la tabla. El problema que tengo y hasta ahora no he logrado resolver, es que mi pagina al tener DATATABLE tarda en cargar y que se acomode correctamente el contenido de forma inmediata. La tabla de la cual realizo la consulta, tiene aprox. 2000 registros.
Mi código de mi pagina lista.php en donde aplico el Datatable es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js">
</script>
<script src="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.18/datatables.min.js">
</script>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4-4.1.1/dt-
1.10.18/datatables.min.css">
<title>Lista Usuarios</title>
</head>
<body>
<div class="table-responsive" id="mydatatable-container">
<table id="mydatatable">
<thead>
<tr>
<th class="text-center" style="width: 5%;">ID</th>
<th class="text-center" style="width: 21%;">Nombre</th>
<th class="text-center" style="width: 17%;">Correo</th>
<th class="text-center" style="width: 14%;">Carrera</th>
<th class="text-center" style="width: 10%;">Nombre</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Filter..</th>
<th>Filter..</th>
<th>Filter..</th>
<th>Filter..</th>
<th>Filter..</th>
</tr>
</tfoot>
<tbody>
<?php
$query = mysqli_query($coneccion,"
SELECT u.id, u.nombre, u.correo, c.nombre_carrera, u.usuario
FROM usuario u INNER JOIN carrera c on u.id=c.id
WHERE u.estado = 1 ORDER BY nombre DESC");
mysqli_close($conection);
$result = mysqli_num_rows($query);
if($result > 0)
{
while ($data = mysqli_fetch_array($query, MYSQLI_ASSOC))
{
?>
<tr>
<td><?php echo $data["id"]; ?></td>
<td><?php echo $data["nombre"]; ?></td>
<td><?php echo $data["correo"]; ?></td>
<td><?php echo $data["nombre_carrera"]; ?></td>
<td><?php echo $data["usuario"]; ?></td>
</tr>
<?php
}
?>
</table>
<style>
#mydatatable tfoot input{
width: 100% !important;
}
#mydatatable tfoot {
display: table-header-group !important;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#mydatatable tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Filtrar.." />' );
} );
var table = $('#mydatatable').DataTable({
"dom": 'B<"float-left"i><"float-right"f>t<"float-left"l><"float-right"p>
<"clearfix">',
"responsive": false,
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Spanish.json"
},
"order": [[ 1, "DESC" ]],
"initComplete": function () {
this.api().columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
});
})
}
});
});
</script>
</body>
</html>
He realizado pruebas quitando el código del Datatable y el contenido de la pagina carga inmediatamente, agradecería si alguien me puede orientar para resolver mi problema.