Filtrar tablas con Jquery – Buscar en tablas con Jquery [uiTableFilter]

Aprende como filtrar datos de una tabla y realizar búsquedas instantáneas utilizando Jquery y su plugin uiTableEdit

Hace mucho tiempo escribí un post sobre tablas dinámicas con jquery, hoy tuve la necesidad de recurrir a otro tipo de plugin jquery para tablas.

No se trata de un plugin para crear bonitas interfaces ni una usabilidad de drag&drop sino que se trata de filtrar datos de una tabla.

O en otras palabras, crear una búsqueda de datos en la tabla.

Descarga e instalación

Lo primero es descargar desde esta página y agregarlo a nuestro archivo.

Una vez hecho el paso más sencillo vamos a crear el filtrado.

Filtrar datos de una tabla con jQuery

Vamos a trabajar con dos zonas, la zona de búsqueda y la zona de resultados.
La primera puede ser un div con un campo para búsquedas y la segunda una tabla como el siguiente ejemplo.
 
 
 
 
 
 
 
 

		<div id="busqueda">
			<input type="text" id="q" name="q" value="" />
		</div>
		<br />
		<table id="latabla">
			<tr>
				<td>Apuntes.skamasle.com</td>
			</tr>
			<tr>
				<td>Imagenes.skamasle.com</td>
			</tr>
			<tr>
				<td>skamasle.com</td>
			</tr>
			<tr>
				<td>animesmusic.com</td>
			</tr>
			<tr>
				<td>pruebas.skamasle.com</td>
			</tr>
			<tr>
				<td>videos.skamasle.com</td>
			</tr>
			<tr>
				<td>descargas.skamasle.com</td>
			</tr>
			<tr>
				<td>foro.skamasle.com</td>
			</tr>
			<tr>
				<td>alternativasOpenSource.com</td>
			</tr>
		</table>

Una vez tenemos la estructura creada solo nos falta aplicar la magia de jQuery para hacer el filtro.

		$(function() {
		  theTable = $("#latabla");
		  $("#q").keyup(function() {
			$.uiTableFilter(theTable, this.value);
		  });
		});

Como se puede apreciar el código es muy simple.
Solo se declara una variable con el objeto tabla y al levantar una tecla en el campo de búsqueda filtraremos la tabla con los datos que concuerden.

Conclusión

En este artículo aprendimos a filtrar tablas utilizando jQuery.
Aplicando algunos estilos podemos obtener unos resultados mejorados y más presentables.

Como hacía mucho que no colgaba una demo he decidido colgar una y el archivo fuente (que no es mucha cosa) para su estudio y análisis ;)


Demo OnlineClic para ver la demo! Archivos EjemploDescargate el ejemplo!


Así nos han encontrado!

  • filtrar tabla jquery
  • filtrar una tabla mysql
  • jquery filtrar tabla
  • busquedas con jquery
  • uitablefilter
  • tabla jquery
  • buscar en tabla jquery
  • buscar tabla jquery
  • Filtrar tablas con Jquery
  • filtrar tabla con jquery
  • buscar jquery
  • busqueda jquery
  • jquery buscar
  • busquedas jquery
  • buscar con jquery
  • filtrar tablas jquery
  • filtros sobre tablas php y jquery
  • tabla en jquery
  • $ uitablefilter
  • jquery tabla

13 Responses to Filtrar tablas con Jquery – Buscar en tablas con Jquery [uiTableFilter]

  1. Claudio dice:

    Muy bueno el ejemplo, lo probe con php y funciona, lo único que me gustaría saber es como hacer ese filtro cuando llenas la tabla con un query mysql, yo lo hice pero no me filtra, según parece sólo lee el primer registro. Gracias, saludos.-

  2. Nax dice:

    debería ver tu ejemplo claudio.
    si lo pegas en pastebin y me pasas el enlace lo miro.

    En principio la forma en que actualices la tabla es indiferente, solo has de mantener la estructura.

  3. gabriel dice:

    hola amigo, buen ejemplo me has ayudado para hacer la busqueda mas rapido en un registro de datos, una pregunta sabes como haria para poder obtener el valor de una celda de un table y que me pueda mostrar en un text al hacer clic en la celda.

  4. nury dice:

    Hola,excelente codigo, pero tengo un problema no me funciona ni en google chrome ni en IE, en mozilla si, q se debe modificar, pliss si pueden responderme rapido les agradeceria gracias

  5. Renny dice:

    Hola, como puedo filtrar a excepción del ya que lo uso con el plugin tablesorter.

    Gracias.

  6. Alma dice:

    Hola, muchas gracias por la información, pero me pregunto si sería posible hacer que no empiece a buscar hasta haber escrito al menos 3 o 4 letras??.

    Muchas gracias

  7. Ignacio dice:

    Muy buena información, pero no me funciona al cargar la información desde mysql en php, al igual como indicaron solo filtra la primera fila.

    Saludos!

  8. Vicente dice:

    Saludos, excelente informacion, pero ahora estoy usandolo en una tabla con muchos registros y no me separa por td, si no por tr solamente, me puedes dar una ayuda por favor.

  9. Jose dice:

    Saludos amigo!

    Tengo un código parecido al tuyo pero quiero ir un paso más si es posible, y es combinar la búsqueda(filtro) con dos campos.

    Pongamos que tenemos una agenda de clientes y quisiera filtrar por nombre y también por población por ejemplo.
    Tengo todo el código montado en PHP y lo filtra perfectamente con un botón, y 4 campos que pueden filtrar.

    Pero al pasarlo a jQuery para no tener que recargar la página es cuando no se como puedo hacerlo.

    Si fueras tan amable de echarme una mano te lo agradecería enormemente.

  10. Hola Jose, pues en principio podrías tener un script php que te devolviese los campos directamente en JSON y hacer una petición POST y rellenar la tabla con lo que te de…

    si te da
    [
    { campo1:valor1, campo2:valor2, campo3:valor3 },
    { campo1:valor1, campo2:valor2, campo3:valor3 },
    { campo1:valor1, campo2:valor2, campo3:valor3 }
    ,{ campo1:valor1, campo2:valor2, campo3:valor3 }
    ]

    Utilizas JS para rellenar y vaciar la tabla según lo que hagas.

    No se que tanto explicarte porque no se tu nivel pero esto te podría servir:
    http://api.jquery.com/jQuery.post/
    http://php.net/manual/es/function.json-encode.php

    Si vas a trabajar mucho con ese tipo de peticiones quizá te sirva tener una API REST:
    http://stackoverflow.com/questions/1628628/how-to-write-rest-in-php
    https://gist.github.com/carlosvillu/3762253

  11. vicente, pues no sabría que decirte, que consideras “muchos registros”?

  12. Roberto Cortijo dice:

    Gracias por tu aporte.. me sirve de mucho para empezar con mi proyecto.

  13. angelo dice:

    Bueno el ejemplo sencillo y eficaz felicidades

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">