Filtrar GridView con JQuery

Posted on


En el post pasado (miralo aca) vimos como podemos añadir la funcionalidad de ordenamiento a un gridview utiizando jQuery, mencionamos el uso del los css friendly controls adapters para mejorar el renderizado del grid  poder hacer uso del plugin de jQuery.

En este artículo vamos a revisar como podemos añadir un textbox el cual al ir ingresado caracteres nos ayudará a ir filtrando nuestro grid, similarmente como el ejemplo del post anterior haremos uso de los css friendly controls adapters para mejorar el renderizado del grid.

Para este ejemplo vamos a utilizar el plugin de jQuery quickSearch, en este caso utilizaremos el mismo ejemplo del post anterior solo que le añadiremos esta nueva funcionalidad.

Primero añadimos una referencia al plugin de jQuery quickSearch, luego añadimos un textbox donde al ir escribiendo se realizará el friltro del grid,  finalamente el código jQuery:

  
$(function () { 
$("#<% = grvDatos.ClientID %> table").tablesorter(); 
$("#<% = txtBuscar.ClientID %>").quicksearch("#<% = grvDatos.ClientID %> table tbody tr"); 
}) 

Lo importante aca es la 3ra línea de código es donde vamos a hacer uso del plugin, primero el selector que desencadanará el evento es el campo de texto, luego le decimos que seleccione el gridview, y le añadimos algunos filtros los cuales son table para que seleccione la tabla (como vimos en el post anteriores la tabla se crea dentro de un div), luego que filtre el cuerpo de la tabla tbody y finalamente que seleccione las filas tr.

Como siempre les dejo el ejemplo en VB y en C#.

Ejemplo en VB !
Ejemplo en C# !

24 comentarios sobre “Filtrar GridView con JQuery

    x4v1er escribió:
    05/18/2011 en 16:50

    Hola como estas, estoy intentando hacer lo mismo pero no se como referencias la columna que quieres filtrar en el script, osea como se cual es el nombre que va despues del nombre de mi griview.”columna”

    $(“# table”).tablesorter();

    por ke me sale este error BC30456: ‘Nombre’ no es un miembro de ‘System.Web.UI.WebControls.GridView’.

    $(function () {
    $("# table").tablesorter();
    $("#").quicksearch("# table tbody tr");
    })

    x4v1er escribió:
    05/18/2011 en 16:52

    perdoname hay va la linea ke pone error

    (“# table”).tablesorter();

    x4v1er escribió:
    05/18/2011 en 16:52

    (“# table”).tablesorter();

    x4v1er escribió:
    05/18/2011 en 16:53

    no se que pasa que no me sale el codigo te encargo si me puedes ayudar

    x4v1er escribió:
    05/18/2011 en 19:21

    parce gracias por tu ayuda, solo me queda un inconveniente que no entiendo, y es que yo le tenia autoformato a las grid, pero se los quito, pense ke se arreglaria con el grid.css, pero no… no se que sera

    gracias por tu ayuda de nuevo de resto el filtrado ya funciona😀

      Julio Avellaneda respondido:
      05/18/2011 en 22:12

      hola, revisa y veras q en ejemplo asgno la clase con la propiedad cssfriendlyclass, usa esa en lugar de cssclass

    Cristian Pérez escribió:
    06/06/2012 en 16:59

    Hola,
    Antes que nada gracias por el articulo,
    Desafortunadamente tengo un pequeño problema,
    Estoy tratando de implementar esa función de buscar en uno de mis formularios,
    Cabe anotar que todas mis paginas son “Hijas” de una MasterPage.
    Hice todos los pasos:
    – Poner el Grid dentro de un
    – Referenciar CSSFriendly.dll
    – Agregar y referenciar el plu-gin quicksearch
    – Copiar, pegar y modificar la función de busqueda
    Pero cuando agrego el archivo “CSSFriendlyAdapters.browser” en la carpeta “App_Browsers” cambia gran parte del diseño de mi aplicativo cambía, por ejemplo el menú y varias cosas relacionadas con estilos, ademas que el buscar no me funciona,
    Depronto sabes a que se debe este comportamiento ?
    Gracias de antemano

      Julio Avellaneda respondido:
      06/06/2012 en 17:01

      hola Cristian, lo q debes hacer es revisar el archivo .browser a estas agregando, alli estas definidos q controles afectar, deja solo el gridview, ya el afecta muchos copntroles de asp.net, entre ellso el menu

      cuentame cualquier cosa, saludos

        Cristian Pérez escribió:
        06/07/2012 en 08:28

        Hola Julio,

        Ya estoy muy cerca de implementar correctamente la función de buscar😉
        Solo tengo dos dudas:
        – En el archivo .browser solo dejé la definición del grid, entonces el diseño de mis grid me cambia un poco, mira te muestro como lo tenía:

        http://social.msdn.microsoft.com/Forums/getfile/117537

        Pero después de agregar el archivo .browser mira como me quedó:

        http://social.msdn.microsoft.com/Forums/getfile/117538

        Nota que cambiaron varias cosa (todos los links, tamaño y en algunos alineación de algunas columnas)

        De pronto sabes como puedo solucionar ese inconveniente con el diseño de mis Grid ?

        – La función buscar no me funcionaba por que yo no cargo la información en el Grid en el Page load de mi pagina, tengo un link “Mostrar todos los registros” que se encarga de asignar un Datatable a la propiedad DataSource de mi Grid.
        Esto lo hago mas que todo por mejorar el rendimiento de mis formularios, pero ese es otro cuento ….
        La cosa es que si lleno mi grid en el Load de mi pagina, la función de buscar me funciona sin problemas, pero si lo hago en otro evento (un: _clic) por ejemplo, esta no me funciona😥

        Te agredeceria enormemente si me colaboras con estos pequeños inconvenientes, estaba buscando una función de buscar en un grid hace años y estoy muy cerca de lograr que me funcione completamente !!!

        Mil gracias de antemano

        Julio Avellaneda respondido:
        06/07/2012 en 12:21

        Hola, los estilos te cambian, mirate en el ejemplo q tengo en la definiion del grid no uso cssclass sino cssfriendlyclass, mirate bn elk nombre de la propiedad y alli le asignas la clase css q requieras.

        Las imagenes del grid no las puedo ver, me sale error, el tema del filtro con el boton de cargar registros igual deberia funcionar, de casualidad tienes algun updatepanel?

    Cristian Pérez escribió:
    06/07/2012 en 14:43

    Hola Julio,
    Soy el del comentario anterior ….
    Si te sale un error al ver las imágenes revisa en este otro Host:
    Así es como estaba antes:

    Y así es como quedó:

    Pero bueno, voy a revisar lo que me dices de la propiedad cssfriendlyclass !!

    Y referente al tema del filtro, sip, uso un UpdatePanel donde esta todo el “body” de mi formulario …..
    Hay algo que pueda hacer (agregar un trigger o algo por el estilo) para que me funcione mi función en esas condiciones ?

    Gracias de antemano !

      Julio Avellaneda respondido:
      06/08/2012 en 00:27

      Hola, claro alli esta el error, el problema lo tienes por tener todo en un solo updatepanel, relamente asi no lo deberias manejar, la idea entonces es q cuando la actualizacion parcila de tru updatepanel termine entonces recargues los scripts, par esto utiliza Microsoft Ajax Library, la cual le da vida al ACT…. dejame la reviso pq no recuerdo el metodo y te cuento al rato

    Cristian Pérez escribió:
    06/13/2012 en 17:15

    Hola de nuevo Julio !
    Perdón por la insistencia, pero me falta poco para lograr lo que necesito !
    He leído varias veces en los comentarios de este artículo, que para resolver los problemas con el diseño de los GridView sugieres:
    “revisa y veras q en ejemplo asgno la clase con la propiedad cssfriendlyclass, usa esa en lugar de cssclass”
    He buscado en todo el proyecto la parte donde le asignas la clase con la propiedad “cssfriendlyclass” al grid pero no la encuentro😦
    Lo que no se es donde realizas esa asignación ?
    Es en la definición HTML del grid ?
    Por JQuery ?
    De nuevo, mil gracias por todo,

      Julio Avellaneda respondido:
      06/14/2012 en 10:42

      Hoal Cristian, mira el la definición del grid tengo la propiedad CSSSelectorClass=”grid” perdon el nombre me habia quedado mal en el comentario, alli es donde le asignas la clase q necesitas, cuando lo hagas el intellisense no te ayudara con ese atributo, pero usalo y verás q te funcionará….

      Cuentame como te va…

        Cristian Pérez escribió:
        06/14/2012 en 12:18

        Listo Julio !
        Funciono perfecto,😀
        Muchas gracias por colaborarme con todos esos inconvenientes que tuve para implementar la función en mi proyecto !!
        Saludos desde Medellín !😉

        Julio Avellaneda respondido:
        06/14/2012 en 12:21

        Q bueno q te funciono.. ya sabes es un gusto!

    […] hace rato, y pues en los últimos días estuve varios comentarios de Cristian en un post anterior (filtrar gridview con jQuery), así que Cristian con este post te contesto, en resumen el problema radica en que cuando se tiene […]

    Adalberto escribió:
    08/22/2012 en 23:43

    Muy buen articulo.
    Y en el caso de querer filtrar los datos por medio de una columna por ejemplo filtrar los datos por medio del precio como seria la manera de hacerlo así?

      Julio Avellaneda respondido:
      08/23/2012 en 13:31

      Hola, en ese caso lo q puedes hacer es modificar: $(“#”).quicksearch(“# table tbody tr”); recuerda q allí se usa un selector, por ejemplo podrías hacer algo como: $(“#”).quicksearch(“# table tbody tr td:first”); y estarías seleccionando la primera celda

      Saludos

    miguel cruz escribió:
    06/21/2013 en 10:39

    hola julio te escribo para saber como se realizaria una funcion en donde en lugar que busque lo que vas escribiendo en el txtbuscar le des clic a un boton donde ese boton mande a llamar por ejemplo una function buscarDatos(){ $(“#grvDatos table”).tablesorter();} por fa me podria ayudar

      Julio Avellaneda respondido:
      06/22/2013 en 07:32

      Hola Miguel, es sencillo, primero define tu función, luego le añades un manejar al evento click de tu botón, algo como: $(‘#idboton’).click(function(){ buscarDatos();});

      Cualquier cosa me cuentas, saludos

    david b.n. escribió:
    01/14/2016 en 15:57

    Hola que tal, tengo un griview dentro de un jquery dialog y no funciona… pero si sacro el gridview del dialog si funciona. alguna sugerencia?… programo en asp.net vb

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s