Plugin de Jquery para filtrar filas de una tabla
February 5th, 2009
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.
Aca pueden ver un ejemplo
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:
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.
Aca pueden ver un ejemplo
La utilizacion es bastante simple. Tan solo hay que incluir los js nesesarios:
<script src="jquery.selectboxes.js" type="text/javascript"></script> <script src="jquery.tableFilter.js" type="text/javascript"></script>
Y luego ejecutar el metodo del plugin pasandole la tabla donde se va a aplicar:
<script type="text/javascript"><!--
$(document).ready(function(){
$("#tabla").tableFilter();
});
// --></script> La tabla tiene que estar formada de la siguiente manera:
| Columna1 | Columna2 | Columna3 |
| Valor1 | Valor2 | Valor3 |
| Valor4 | Valor5 | Valor6 |
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.
Gracias por la mano
Salute
SMart
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!
Lo que tendrias que hacer es modificar lo siguiente: donde se agrega al select el texto que encontro en las filas de las columnas
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
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!!!!
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
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
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
Me podrias decir de donde bajarlos….
Muchas Gracias
http://stekl.org/stuff/jqueryTableFilter/jquery.selectboxes.js
http://stekl.org/stuff/jqueryTableFilter/jquery.tableFilter.js
Saludos,
Mauricio
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
podrán encontrar una variante del script pero para cominar el filtro de varias columnas. Se usa exactamente igual.
Gracias por comentar.
Saludos.
Mauricio