3, 2, 1... Tabla con filtro!! (Crear una tabla con búsqueda en web)

¡Hola a tod@s (Hello World!)!

En este artículo vamos a aprender a crear una tabla con datos para web ¡y con un filtro de búsqueda incluido!

Primeramente vamos a definir en rasgos generales que es un "html".




HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). [by Wikipedia]

Los ficheros que vamos a utilizar con el html serán los *.css ("Hojas de estilo") y los *.js ("Ficheros JavaScript", JavaScript es un lenguaje embebido que es interpretado en el navegador del cliente"), en nuestro artículo utilizaremos ficheros javascript y una serie de etiquetas que dejo como práctica para que los lectores investiguen (no es necesario incidir sobre el código javascript). También quiero hacer mensión a una librería que vamos a usar de javascript y que es muy utilizada en la actualidad como es JQuery. Esta librería la llamamos desde la etiqueta head.

En una página html nos vamos a encontrar primeramente con la etiqueta html que representa el documento y dos etiquetas fundamentales que van dentro: head y body. ¡Comenzamos...!

Empezamos por la "cabecera del html" o head:


<head>
 <title>Buscar en tabla (José Joaquín Sánchez)</title>
 <!-- JS INCLUDES -->
 <script type="text/javascript" 
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
 <script type="text/javascript" 
 src="jquery_table.buscoloquemesaledelospeones.js"></script>
 <!-- JS QUE SE ENCARGA AL PRINCIPIO -->
 <script type="text/javascript">
  $(document).ready(function() {
   $('#divTabla').buscoloquemesaledelospeones('inputFiltro');
  });
 </script>  
</head>

El "cuerpo del html" o body:


<body>
 <!-- Contenedor con la caja de texto para el filtrado -->
 <div>
  <span style="font-weight:bold;">Filtro de Búsqueda:&nbsp;</span>
  <input id="inputFiltro" type="text" />
 </div>
 <!-- línea horizontal -->
 <hr />
 <!-- tabla con los datos -->
 <table id="divTabla" cellpadding="5" cellspacing="0">
  <tr class="titulo">
   <th>Rank.</th>
   <th>Nombre Jugador</th>
   <th>Foto</th>
   <th>Elo</th>
  </tr>
  <tr>
   <td>1.</td>
   <td>[MI] J. Carlos Ibarra</td>
   <td><img src="[direccionWebImagen]" /></td>
   <td>2515</td>   
  </tr>
  <tr>
   <td>2</td>
   <td>[MF] David Antón</td>
   <td><img src="[direccionWebImagen]" /></td>
   <td>2466</td>   
  </tr>
  <tr>
   <td>3</td>
   <td>[MF] Paco Albarracín</td>
   <td><img src="[direccionWebImagen]" /></td>
   <td>2375</td>   
  </tr>
  <tr>
   <td>4</td>
   <td>[MF] Josue Cano</td>
   <td><img src="[direccionWebImagen]" /></td>
   <td>2369</td>   
  </tr>
  <tr>
   <td>5</td>
   <td>Borja Navarro</td>
   <td><img src="[direccionWebImagen]" /></td>
   <td>2335</td>   
  </tr>  
 </table> 
</body>

Puedes descargar los ficheros del ejemplo: Pulsando Aquí
Finalmente el artículo genera:


Filtro de Búsqueda: 

Rank. Nombre Jugador Foto Elo
1. [MI] J. Carlos Ibarra 2515
2 [MF] David Antón 2466
3 [MF] Paco Albarracín 2375
4 [MF] Josue Cano 2369
5 Borja Navarro 2335

8 comentarios:

  1. Muy bueno tio ahora mismo lo pruebo, cuando lo tenga te aviso, gracias.

    ResponderEliminar
  2. Puedes descargar el fichero con el html y un js que verás que es la librería propia que realiza la búsqueda.

    El resultado no es exactamente el mismo que genero en este artículo porque en esta página existen estilos (css) para tablas predeterminados pero el concepto y el funcionamiento te irá correcto.

    ¡Un saludo! y cualquier duda puedes preguntarla. Good playground!

    ResponderEliminar
  3. ok sipi me encaant el kodigo jejje lo ke yo tengo duda es.. de komo lo enlaso a una base de datos, esta genial pero como lo enlaso a la bd para ke haga el filtro de vusqueda ahi
    pis help!!!1

    ResponderEliminar
  4. Requieres de manejar el lenguaje de servidor y peticiones AJAX. No se que tipo de lenguajes usas... si es php, asp, jsp, etc...

    ResponderEliminar
  5. se puede limitar el filtro solo para los nombres???

    ResponderEliminar
  6. Como puedo hacer algo similiar pero sin usar JQuery, estoy usando Prototype, y JQuery no es compatible. Tiene idea?

    ResponderEliminar
  7. Me gustaria poder enlazarlo con una base de datos funciona execelente muchas gracias espero puedan ayudarme gracias..!!

    ResponderEliminar
  8. Buenos días amigo, sabrías como hacer que cuente las filas o elegir la columna de búsqueda?

    Por lo demás todo genial, me ha servido bastante.

    ResponderEliminar

Con la tecnología de Blogger.