Plugin de Jquery para filtrar filas de una tabla
Mi amigo Sebastián (smart) me pidió que le dé una manito con un pequeño javascript para realizar filtros sobre las filas de una tabla, al estilo excel. Así que desempolve mis viejos conocimientos sobre jquery y arme un plugin que agarra una tabla y le agrega selects en cada columna y los llena con los valores diferentes de las filas.
La utilizacion es bastante simple. Tan solo hay que incluir los js nesesarios:
Y luego ejecutar el metodo del plugin pasandole la tabla donde se va a aplicar:
La tabla tiene que estar formada de la siguiente manera:
| Columna1 | Columna2 | Columna3 |
| Valor1 | Valor2 | Valor3 |
| Valor4 | Valor5 | Valor6 |
eso es todo
Bueno, con eso bastaria. Es una version bastante sencilla, si alguien la mejora, por favor avise 
Actualización: Pueden encontrar una nueva versión de este plugin en: http://blog.stekl.org/2009/12/nueva-version-plugin-jquery-para-filtrar-contenido-tablas/
Gracias por los comentarios.
Exelente, la verdad un plugin muy util el cual no habia encontrado en otro lado.
Gracias por la mano
Salute
SMart
buenas!
El código es excelente pero tengo una duda. Si en la tabla, en una de las celdas que quieres filtrar, no hay un texto, sino que lo que hay son campos con sus correspondientes atributos checked (o no checked), cómo puedo filtrar estos campos?
Te lo explico mejor. Una tabla con 3 columnas, en la primera un campo input de tipo checkbox, en la segunda celda texto, y en la tercera texto. Crea perfectamente el filtro de las dos últimas columnas, pero de la primera columna no es capaz….cómo podría hacerlo? lo suyo sería en mi caso, poder filtrar por los campos que estén o no seleccionados.
Espero tu ayuda. Gracias!
Hola, gracias por tu comentarios. Es una buena pregunta la que haces. No tenia pensado hacer ese tipo de filtros. Pero creo que es facil de implementar.
Lo que tendrias que hacer es modificar lo siguiente: donde se agrega al select el texto que encontro en las filas de las columnas
jQuery(select).addOption(iterCelda.text(), iterCelda.text());Tendrias que revisar si lo que hay dentro de la celda, es un input o un texto. En caso de ser input checkbox agregas textos para checked y unchecked al combo.
Luego vas a donde se hace la comparacion para filtrar la fila, que seria donde dice:
if(jQuery(this).find("td:nth-child("+filteringColumn+")").text()==valorDeFiltro){jQuery(this).show();
}
Y en lugar de comprar el texto, tendrias que fijarte el tipo de contenido de la celda, si es un texto dejar esa comparacion y si es un input hacer la comparacion contra su value.
Espero que te ayude. Cualquier cosa, si se te complica con el script podes mandarme el codigo que lo reviso.
Saludos,
Mauricio
hola, wow, muuy interesante plugin, no se mucho sobre jQuery, te podria pedir que le agreges algun filtro para evitar considerar el agregado de algunoas campos por ejemplo:
en mi caso muestro una columna con las fechas, y pues, todas son distintas… seria interesante si podrias agregar dicha actualización (y)
sin mas que decirte felicidades!!!!
waa, que espera ajaxrain.com para agregarlo a su listado XD, nos vemos cuidate!!!
Hola
está geniaaaaaaaaaaaal , pero no me anda!!!
en que formato hay que pagar el código que nos pasas? HTML?
y cuales archivos hay que subir al servidor y en que carpeta?
porque subí como 5 archivos .js que saqué justamente de esta web, más no me funcionaba y copié textualmente el código fuente del ejemplo y lo pegué en el frontpage y lo subí, pero noté que tampoco me funcionó
Esto es lo que estoy necesitando hace mucho tiempo, podrías ayudarme?
Gracias
Hola Juan, antes que nada muchas gracias.
No entiendo bien por que no te funciona, ahi mismo en post digo cuales .js hay que incluir, son dos nada mas. Revisa bien las rutas de los js, capaz que le pifiaste y por eso no te funciona.
En http://stekl.org/stuff/jqueryTableFilter/ podes ver bien el codigo fuente que necesitas para que te funcione.
Saludos,
Mauricio
Hola
Gracias por responder
yo tampoco entiendo por que no funciona, te paso mi email para que puedamos charlarlo orizonteh@gmail.com
es algo q necesito hace tiempo y si es necesario, te podría pagar para que me resuelvas el problema
te podria mandar los archivos para que me lo programes y me des algunas instrucciones
Gracias
saludos
QUE GENIAL POST!!!!!!!!!!!!!!!
es muy interesante. A mi me gustaría saber si es posible hacer un filtro donde los criterios no sean fijos, sino que se pueda escribir el criterio al inicio de la tabla, y que muestre entonces aquellos que contienen ese texto y oculte el resto.
poder, se puede…. aunque creo haber visto algo similar a lo que planteas. Si mal no recuerdo, lo vi en la pagina de plugins de jquery.
Hola, como estas? Muy buen filtro, pero tengo un problema no puedo encontrar los archivos:
Me podrias decir de donde bajarlos….
Muchas Gracias
Los archivos jquery.selectboxes.js y jquery.tableFilter.js
Los archivos los podes encontrar en el ejemplo, las urls serian:
http://stekl.org/stuff/jqueryTableFilter/jquery.selectboxes.js
http://stekl.org/stuff/jqueryTableFilter/jquery.tableFilter.js
Saludos,
Mauricio
buen aporte…. mira tengo solo una duda, necesito que me filtre solamente en dos columnas de todo la tabla como hago eso.. te explico
tengo una tabla con 6 columnas en la primera y va el logo, en la segunda va el nombre en la tercera va zona o ubicacion, en la cuarta va especialidad, en la quinta precio y en la sextad dos imagenes que son si y no de servicio a domicilio… necesito el filtro para todas menos la del logo ya que solo va una imagen y la ultima como puedo hacer para que me filtre la imagen puedes ver el ejemplo aqui http://www.cucutain.com/prueba/tablamia.html
otra cosa como hago para que en una celda vallas dos valores y los tome diferente por ejemplo en zona que valla CAOBOS – LA CEIBA son dos ubicaciones pero en el filtro el me la toma como una sola
Me ha servido basatante , pero solo se puede filtrar de acuerdo a lo seleccionado en un select , hay alguna forma que se puede filtrar de acuerdo a lo seleccionado en varios select , así como en excel
Hola, a pedido del público, en este link: http://stekl.org/stuff/jqueryTableFilter-0.2/
podrán encontrar una variante del script pero para cominar el filtro de varias columnas. Se usa exactamente igual.
Gracias por comentar.
Saludos.
Mauricio
es muy interesante. A mi me gustaría saber si es posible hacer un filtro donde los criterios no sean fijos, sino que se pueda escribir el criterio al inicio de la tabla, y que muestre entonces aquellos que contienen ese texto y oculte el resto.
poder, se puede…. aunque creo haber visto algo similar a lo que planteas. Si mal no recuerdo, lo vi en la pagina de plugins de jquery.
Hola, me parece excelente el jquery, lamentablemente no me funciona y no se por que, alguien podría darme una mano, estoy realizando la implementacion tal cual esta en el código, quiero que los datos los saque de una BD, sera ese el problema.
Como puedo quitarle en filtro a una columna ?
si alguien tiene la respuesta por favor hacérmela saber, de ante mano muchas gracias.