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:
Tabla dinámica MySQL

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

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>

Iván Martínez

Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

2 comentarios sobre “Como crear tablas dinámicas con MySQL, PHP y estilos Bootstrap

  • el Dic 10, 2018 a las 8:06 pm
    Permalink

    Lo que quisiera es sacar el scroll vertical porque si tengo 100 mil registros? quisiera que se minimizara, gracias

    Respuesta

Deja un comentario

Tu dirección de correo electrónico no será publicada.