[Tips] Filtrar un Gridview con Jquery al presionar una tecla :)

Update: La posibilidad de filtrar y que no desaparesca la paginación y la descarga del código está en:
http://geeks.ms/blogs/gperez/archive/2011/04/10/tips-filtrar-un-gridview-con-jquery-al-presionar-una-tecla-y-no-filtra-el-pager.aspx

 Necesitaba filtrar un gridview al más estilo Windows Form, en donde presionas una tecla y luego se va filtrando la grilla, en mi caso , era sobre los datos que estaban ya en la página, por lo que no iba a tener que darme la vuelta de Marte(el server) y volver con los datos por cada tecla presionada.

Entonces, encontré esta página, como la explicación está en ingles, yo te la doy en español, y vamos a ver como funciona :).

http://kobikobi.wordpress.com/2008/09/15/using-jquery-to-filter-table-rows/

1.- Primer paso
Vamos a utilizar un GridView junto a un input type=”text”, no vamos a utilizar un webcontrol, aunque podrías, no hay problema.

image

2.-Importar la Librería JQuery

<script src=”Scripts/jquery-1.3.2.min.js” type=”text/javascript”></script>

 

 

3.- Código Fuente

<script language=”javascript” type=”text/javascript”>
      $(document).ready(function() {
            //agregar una nueva columna con todo el texto
            //contenido en las columnas de la grilla
           // contains de Jquery es CaseSentive, por eso a minúscula

      $(“.filtrar tr:has(td)”).each(function() {
      var t = $(this).text().toLowerCase(); 
                $(“<td class=’indexColumn’></td>”)
                .hide().text(t).appendTo(this);
            });

            //Agregar el comportamiento al texto (se selecciona por el ID)
            $(“#texto”).keyup(function() {
                var s = $(this).val().toLowerCase().split(” “);
                $(“.filtrar tr:hidden”).show();
                $.each(s, function() {
                     $(“.filtrar tr:visible .indexColumn:not(:contains(‘”
                     + this + “‘))”).parent().hide();
                }); 
            }); 
        });

     </script>

4.- Saber como funciona el código (si ya sabes, te lo saltas)

Ahora la explicación del código, como la mayoría de la gente que ve este blog son estudiantes, siempre recomiendo entender el código antes de solo pegarlo, o si no nos transformamos en simples copy-pasteros 😛

      $(document).ready(function() {

JQuery nos da brinda esta función que nos va a servir para agregar el código que está dentro del ámbito una vez que la página este cargada completamente (Render listo).

   $(“.filtrar tr:has(td)”).each(function() {
      var t = $(this).text().toLowerCase(); 
                $(“<td class=’indexColumn’></td>”)
                .hide().text(t).appendTo(this);
            });

 

Lo que hizo el autor del código fue obtener todas los td de los tr (“.filtrar tr:has(td)”) y recorrerlos uno por uno (each) y atacharle el siguiente comportamiento: la variable t, va a obtener el texto de cada td pasado a minúsculas, luego crea un td adicional en donde deja todo el texto(text(t).appendTo(this); y le agrega el atributo class=’indexColumn’ de manera de poder identificarlo para la búsqueda, además oculta esta columna(hide).

$(“#texto”).keyup(function() {
    var s = $(this).val().toLowerCase().split(” “);
    

En esta parte de código se le atacha el comportamiento en el evento keyup al textbox que tenemos (cuyo id es “texto”), ahora el arreglo s tiene el valor de lo que está escrito en la caja (la primera vez una sola letra o número) , se transforma a minúsculas (recuerda que toda la columna nueva está con letras minúsculas, y el contains de Jquery es Case Sensitive) . Esto se transforma en un arreglo, si es que hay un espacio “hola como estas”, mediante la función Split Ej: S[0]=”hola”,S[1]=”como”,S[2]=”estas”.

   $(“.filtrar tr:hidden”).show();

Esta línea nos va a servir para  volver a mostrar los TR que ocultamos ya que no concordaban con la búsqueda y que,  al volver con el backspace deberían aparecer nuevamente.

$.each(s, function() {
        $(“.filtrar tr:visible .indexColumn:not(:contains(‘”
        + this + “‘))”).parent().hide();
     }); 

Ahora, por cada elemento dentro del Arreglo, vamos a filtrar todos los tr visibles (obvio, los invisibles ya no nos sirven), en donde la columna oculta .indexColum no contenga el contenido del arreglo s, como el final del selector fue un td, llamamos al parent() (tr) y lo ocultamos.

5.-Últimos ajustes

Con esto me refiero a lo que debes tener en la grilla y es super simple, si te diste cuenta se selecciona por clase .filtrar, por lo que tu grilla debe contar con ese atributo:

<asp:GridView ID=”GridView2″ class=”filtrar” runat=”server” …

 

6.-Resultado

image

Video:

 

Espero que te haya sido útil, recuerda que esto te sirve para php también, próximamente subo los ejemplos de filtrar por una sola columna.

Saludos,
Gonzalo

81 comentarios en “[Tips] Filtrar un Gridview con Jquery al presionar una tecla :)”

  1. Disculpa no logro hacer ese proceso, de antemano te comento que recien empiezo con esto, me gustaria implantar este proceso por que es fenomenal, yo vengo de programar buen tiempo en Windows, y la verdad que esta herramienta es muy buena pero me esta costando como te digo. podrias poner un link donde ver mas ejemplos de este tipo.

    de antemano muchas gracias.

  2. Hola Ricardo, si deseas me envias un correo a chalalo arroba hotmail punto com (lo escribo asi por el correo basura) y te envio el ejemplo ,vale?

    saludos,
    gonzalo

  3. Que tal Gonzalo,

    ya revise el ejemplo y funnciona muy bien, solo un detalle, la pregunta es si lo corriste en IE8, ya que en modo de compatibilidad el backspace funciona pero sin la compatibilidad no :S

    pienso que es cosa del framework de jquery, pero seguire revisando a ver si encuentro porque sucede esto.

    Saludos!!

  4. Oye? funciona muy bien, pero si me interesa el ejemplo por columna, porque tengo mas de 3000 registros en un catalogo de mensajes, y se tarda algo en filtrarlo de esta manera.

    Saludos.

  5. Gustavo, este ejemplo es solo para los datos que estan dibujados en la página, por lo que si estas paginanando, te va a servir un like normal del lado del servidor, pero mucho más lento.

  6. hola me gustaria saber como hacer el mismo filtro pero en C#.net.

    Lo que necesito es ingresar un texto en un textbox y a medida que ingreso una letra me vaya filtrando en una columna de un datagrid.

    Si me pueden ayudar,se los agradezco

  7. En ese caso es distinto , puedes tener en un textbox, en el avento keypressed, un método que a partir de lo que se escribe, haga una consulta con Like en el where, y haciendo el databind, pero recuerda que si estas en asp.net deberías usar ajax, pero el costo de recursos no es menor

  8. Hola sabes es justo lo que busco, pero te cuento que no me fuciona muy bien bueno espero me puedas enviar el ejemplo si no es mucho abuso o molestia te lo agradeceria un mundo, y espero me puedas responder ya que para que este post esta un cpo tarde mi favor…
    Gracias gracias de antemano… mi correo es mayca1984@hotmail.com

  9. Tengo una duda, espero me puedan ayudar.

    Ya realize los pasos señalados, ya tengo la aplicacion y funsiona bien al escribir -si filtra- pero al dar backspace no regresa las celdas ocultas.

    Saludos

  10. Gonzalo se ve bueno el Video, hago todo lo que tu explicas muy didacticamente por cierto, pero no me funciona, que podar ser, podrias mandarne el proyecto para verlo en mi pc…

    te dejo mi correo flaco_enzo arroba hotmail.com lo dejo asi por lo que tu comentabas…

    desde ya te agradezco

  11. hola amigo esta muy bueno el ejemplo lo e probado y esta bien pero tengo mi grid paginado lo e probado con like en el servidor y nada podrias ayudarme porfavor…

  12. Excelente el ejemplo, recién acabo de migrar a desde PHP a .NET con JQuery y el ejemplo esta muy bueno, estimado si no es mucho pedir, tiene algunos tips o algun docto en donde especifique una metodología de programación para construir un software a nivel profesional, por ejemplo, el ordeanmiento de las clases, relaciones con Jquery,Master Page…

    salu2

    ricardo.f.zuniga@gmail.com

  13. bueno amigo funciona asi en un webform normal, pero si tu lo haces desde una pagina que herede del master page, pues tu codigo no funciona para ese caso.

    Haber si lo solucionas amigo.

    Por lo demas saludos

  14. Edwin, revisa el clientId generado para tu control , al estar dentro de una master page, seguramente cambio, me imagino qe ya no se llama $(“#texto”)

    Saludos,

  15. no me sale tu ejemplo, hice todo lo q dices y nada de nada…..

    Me podrias enviar el codigo, el javascript mas tu ejemplo, porfavor, gracias.

  16. Excelente Ejemplo, yo tengo un problemita con los filtros, sucede que necesito adicionar 2 filas en la cabecera una sobre el Header y otro debajo, en la primera fila agregar un checkbox que me servirá según su estado para agregar la segunda fila con controles para filtrar por columna. Espero me puedas ayudar. toda idea será bienvenida. Saludos

  17. amigo ayudame con esto mira me sucede esto.
    si la tabla se carga desde el load con datos funcina pero si al inicio no tengo nada en el form u hago una busqueda con campos del textbox y presiono click ahi me recupera los datos en el gridview ya no funciona esto de buscar no se ayudame para poder hacer esto… no se si me explico, mi correo es jaleks2012@hotmail.com

  18. hola amigo como estas el ejemplo esta muy bien pero tengo una duda el ejemplo funciona solo para los datos que esta en la pagina como tal, pero si tengo paginado mi grid como hago para que me filtre por favor podrias ayudarme si… gracias….

  19. gracias amigo …. soy nuevo en esto de jquery y asp.net por eso la duda con el ejemplo igual gracias y sigue adelante con esos aportes que son muy interesantes…..

  20. Estimado encuentro genial que puedas hacer esto con jquery.

    Si me puedes enviar el codigo para aplicar este codigo en un user control sería fantastico.
    mi correo

    l r m o r e n o r @ g m a i l . c o m

    Gracias

  21. Hola Gonzalo, te cuento lo que quiero hacer por si tienes un ejemplo de eso, es filtrar un grid por datos de las columnas, si es mayor menor que un numero… y a poder ser que los filtros puedan unirse, es decir que sean mayores que la columna A y menor para la columna B. Creo que no me explico nada de nada….

    De todas formas por ahora con que no me filtre el encabezado de las columnas me vale 🙂

    Mi mail es susanamartinezj@gmail.com

    Muchas gracias de antemano.

    Saludos.

  22. Hola buenas tardes, te agradezco si me colabroas enviandome el codigo al correo jsoriano30hotmail.com , si tiene el ejemplo pero para realizar la bùsqueda por columnas, aùn mejor.

    Muchas gracias.

  23. Hola estoy probando pero sale error: Error en tiempo de ejecución de Microsoft JScript: Se esperaba un objeto?
    Me podrias pasar el codigo completo por correo gracias
    Juan Pablo

  24. hola gonzalo, este tema esta muy bien, me ayudo a darme una idea, veras el codigo me marca un error al intentar importar la libreria, sera por la vercion de vs? uso vs2005, ademas me gustaria que me enviaras tu ejemplo me seria de gran ayuda, llevo poco programando y mas aun con lo que este relacionado con java script

    arthuro.zerda@hotmail.com

    espero respuesta
    saludos!!

  25. Que tal Gonzalo!!! Oye alguna idea de como hacer este filtrado en un GRIDVIEW paginado… Por Fa! =] “Estaba buscándote en el IM pero no te vi conectado juju”

  26. Buen ejemplo, pero que pasa cuando tienes un mundo de 500.000 registros y filtras en el navegador del cliente, o por ejmplo si tengo paginado mi gridview por la gran cantidad de información, recuerda que en la paginación la grid se actualiza en la pagina trasera, no en el nevegador del cliente.

  27. Hola Fernando,
    La idea de este ejemplo es filtrar en los datos que se muestran en el cliente, mostrar 500000 me parece un error tremendo, segundo, se debe utilizar siempre paginación eficiente en las grillas, es decir, si muestras 20 o 30 en la grilla, no vas a buscar 500.000 y solo muestras 30 dejando 499.970 fuera, y que sin embargo obtuviste.

    Te recomiendo leer:
    http://geeks.ms/blogs/gperez/archive/2009/03/02/paginando-eficientemente-en-asp-net.aspx

    Saludos,

  28. gonzalo tu respondes a gustaVo…. este ejemplo es solo para los datos que estan dibujados en la página, por lo que si estas paginanando, te va a servir un like normal del lado del servidor, pero mucho más lento….. la verdad esa parte no entendi .. pues se puede buscar en toda la grilla … aunque este paginada? … hay modo de hacerlo…. bueno saludos y muy bueno …

  29. Hola Gonzalo, me parece muy interesante esta ayuda, pero hay alguna posibilidad de que me puedas enviar una copia de un ejemplo?
    mi correo es lord lionell arroba hotmail punto com

    te agradeceria mucho… ya que esta ayuda me es util en un proyecto de la U

  30. Hola Gonzalo,

    El código va de lujo, la verdad es que es justo lo que necesitaba, y puesto que de jquery no controlo mucho, me viene muy bien… El problema que tengo es el mismo que ya te han comentado varios compañeros, pero al que no he visto contestación… Si el gridview está paginado ¿cómo se puede hacer para que el filtrado de las filas no solo se haga en la página actual sino en todas las que contenga el grid?

    A ver si me puedes echar un cable… GRACIAS!!

  31. Hola… Gonzalo :/ hice todos los pasos y copie el codigo, pero no me funciona… yo uso el jquery 1.4.1 no creo que ese sea el problema.. yo no se mucho de jquery ojalá me puedas ayudar

  32. Buenas noches Gonzalo…

    esto esta muy bueno,,pero cuando tu tienes el codigo dentro de una master page no funciona…es mas si agregaramos un formulario menos..ya que por defecto en la master ya tenemos un formulario…por ay vi una respuesta que le diste al compañero edwin,,,pero no entendi nada y que por ningun lado encontre la propiedad clientid de algun control,,,,,mi correo es ingenieromauriciogarcia@gmail.com.-…….agradezco me colabores lo mas pronto posible

Deja un comentario

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