Como crear tablas dinámicas con MySQL, PHP y estilos Bootstrap
Vamos a ver como generar una tabla dinámica a partir de la lectura de contenido de una tabla de nuestra base de datos MySQL.
Antes de nada vamos a ver el resultado final:
Para ello vamos a dividir el código en varios puntos (vamos a trabajar sobre un único archivo llamado TablaDinamica.php).
1- Cargamos librería Bootstrap
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
>
2- Realizar la consulta sobre nuestra tabla
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" > |
NOTA: Previamente debemos estar conectados a nuestra base de datos para realizar la consulta.
Usamos * para obtener todos los campos, pero también se pueden obtener los campos individualmente porque en muchas ocasiones no es necesario obtener todos los campos si algunos no se van a usar.
Vamos a realizar una consulta a la tabla usuarios y vamos a guardar el resultado en la variable $consultaUsuarios (la consulta nos devuelve los datos en forma de array).
<?php $consultaUsuarios = mysql_query("SELECT * FROM usuarios"); ?> |
3- Generamos la tabla dinámica
Clases de Bootstrap que podemos usar en nuestra tabla:
- table-responsive : aparece un scroll horizontal en la tabla en dispositivos pequeños.
- table : estilos básicos
- table-striped : dependiendo si es fila par o impar cambia de color.
- table-bordered : aplica borde sobre la tabla.
- table-hover : cambia de color la fila de la tabla al pasar el ratón por encima.
- table-condensed : Hace más compacta la tabla eliminando espacios.
Vamos a usar las siguientes clases de Bootstrap para nuestra tabla: table-responsive, table, table-bordered, y table-striped, por lo tanto vamos a comprobar que nuestra tabla tendrá borde y las filas pares tendrán un color siempre diferente a las filas impares.
<div class="table-responsive"> <table class="table table-bordered table-striped"> <thead> <tr> <!-- definimos cabeceras de la tabla --> <th>Nombre</th> <th>Teléfono</th> <th>Email</th> </tr> </thead> <tbody> <?php //recorremos resultado de la consulta y añadimos el contenido a la tabla while($row= mysql_fetch_array($consultaUsuarios)) { echo "<tr>"; echo "<td>".$row['tabla_nombre']."</td>"; echo "<td>".$row['tabla_telefono']."</td>"; echo "<td>".$row['tabla_email']."</td>"; echo "</tr>"; } ?> </tbody> </table> </div> |
Excelente!! gracias C:
Lo que quisiera es sacar el scroll vertical porque si tengo 100 mil registros? quisiera que se minimizara, gracias