[ASP.NET] Plugin jQuery quickSearch: Filtrar tablas y listas (ejemplo con Gridview)

Búsqueda “rapida” en tablas HTML o listas filtrando “on-the-fly”. Unas de las preguntas en los foros/grupos fue: Como filtrar GridView al presionar una tecla?

Plugins de jQuery para esta tarea hay muchos, por ejemplo…

  1. uitablefilter http://plugins.jquery.com/project/uiTableFilter

    http://gregweber.info/projects/uitablefilter

    demo: http://gregweber.info/projects/demo/flavorzoom.html

  2. quickSearch

    http://plugins.jquery.com/project/quicksearch

    demo: http://lomalogue.com/jquery/quicksearch/

    Nuevo repositorio del plugin en GitHub: https://github.com/riklomas/quicksearch
  3. columnFilter

    http://plugins.jquery.com/project/ColumnFilters

    demo: http://www.tomcoote.co.uk/jQueryColumnFilters.aspx

El ejemplo es con el plugin numero 2, quickSearch que fue un pedido en los foros/grupos de ASP.NET

[Actualización 14/01/2012] Nuevo ejemplo para descargar (ir al final). Actualización del repositorio de quickSearch

Para comenzar: Tablas semánticas

Importante 1: Tablas semánticas

Hay que tener en cuenta que para estos trabajos con tablas las mismas deben tener un semántica en sus filas… que queremos decir con “semántica de filas”, poder diferenciar las filas del encabezado del resto de las filas del cuerpo (filas de información/datos) y las del pie

Mas info:


Importante 2: Gridview de ASP.NET 2.0/3.5 y su renderizacion por default

El gridview que viene con ASP.NET por default el renderizado de las filas no es “muy semántico” es decir no agrupa las filas en tipo de filas.

OPCION 1: Utilizar CSS Friendly Adapter

Para ello necesitamos utilizar un “condimento” que es el CSS Friendly Adapter, que ya hablamos por aquí.

En el ejemplo que se adjunta para descargar al final se encuentra configurado el componente.

Gridview “normal” 😉 Gridview renderizado con CSS Friendly Adapter
image

image

image

image

 

OPCION 2: Generar thead en el gridview sin CSS Friendly Adapter

Puedes utilizar este snipeet:

GridViewJedis.DataSource = JediHelper.Listado();
GridViewJedis.DataBind();

GridViewJedis.UseAccessibleHeader = true;
GridViewJedis.HeaderRow.TableSection = TableRowSection.TableHeader;

Y renderiza de esta menera

Gridview con la opcion 2 Gridview renderizado con CSS Friendly Adapter
coloca el encabezado agrupado en thead

image  

Aquí encierra a la tabla HTML con un DIV, y además coloca en cada fila estilos CSS para poder “personalizarlos”

image 

image

 

RECOMENDACION: utilizar CSS Friendly Adapter para ser mas fácil a nuestros diseñadores gráficos para web 😉  a la hora de “estetizar” el trabajo.

 

Volviendo al tema del filtrado de la tabla…

 

Armando el ejemplo

Hay que descargar el plugin de jQuery quickSearch y por supuesto la versión de jQuery que estemos trabajando (este plugin es soportado por el framework de jQuery 1.2.x o superior)

image

Luego tenemos que tener una tabla y input text de donde se dispara el plugin

En este ejemplo lo obtengo así:

  1.  
    1. Obtener el Id del lado del cliente del Textbox
    2. Idem del Gridview
    3. Desde el textbox disparo el plugin para el selector de todas las filas de la grilla (del cuerpo de la misma)
<script type="text/javascript"">
    $(document).ready(function() {
        var txtFiltro = '#'+'<%=txtFiltro.ClientID %>';
        var grillaJedis = '#'+'<%=GridViewJedis.ClientID %>';
        $(txtFiltro).quicksearch(grillaJedis + ' tbody tr');
    });
</script>

Mas info en la ayuda del plugin

Al final se encuentra el ejemplo para descargar.

 

Veamos el comportamiento…

 

Ejemplo 1: Gridview sin CSS Friendly Adapter

Podemos ver que si no tenemos control de las filas de datos.. el plugin tambien filtrar el contenido del encabezado

<script type="text/javascript"">
    $(document).ready(function() {
        var txtFiltro = '#'+'<%=txtFiltro.ClientID %>';
        var grillaJedis = '#'+'<%=GridviewJedis.ClientID %>';
        $(txtFiltro).quicksearch(grillaJedis + ' tbody tr');
    });
</script>

Vemos que el selector que aplicamos al plugin quickSearch es que lo realice en todas las filas (tr) dentro de cuerpo (tbody) de la tabla

NOTA: Aqui voy a aclarar que en el ejemplo para descargar al final esta pagina no tiene un gridview, sino una tabla html que es la copia textual del renderizado de un gridview. Esto es para que en el mismo ejemplo pueda colocar uno con y sin CSS Friendly Adapter.

Gridview “normal” 😉 Filtrando
 
image
 
Filtrando: Yoda

Como el encabezado no tiene la palabra yoda se filtra tambien ;(

 image

Filtro: no

aqui podemos ver que filtra el texto que contiene tambien

image

 

 

 

Ejemplo 2: Gridview con CSS Friendly Adapter (u opcion 2 para renderizar thead)

Si utilizamos CSS Friendly Adapter, y con el mismo código de inicialización del plugin para quickSearch

<script type="text/javascript"">
    $(document).ready(function() {
        var txtFiltro = '#'+'<%=txtFiltro.ClientID %>';
        var grillaJedis = '#'+'<%=GridViewJedis.ClientID %>';
        $(txtFiltro).quicksearch(grillaJedis + ' tbody tr');
    });
</script>

Al filtrar con un texto se mantiene el encabezado

 image

Esto es porque se actua por el selector:

$(txtFiltro).quicksearch(grillaJedis + ‘ tbody tr’);

sobre el las filas del cuerpo

image

 

Ejemplo para descargar

Si no puedes ver para descargar click aquí.

 

[Actualización 14/01/2012] Nuevo ejemplo para descargar

Se actualizo la version del plugins como mejoras (se actualizo el evento .bind a .on de jQuery) . Métodos como .search, .currentMatchedResults, .cache)

Actualización del repositorio de quickSearch en GitHub

Para descargar ejemplo click aquí: http://sdrv.ms/WXXcOH

 

 

Enlaces

5 comentarios en “[ASP.NET] Plugin jQuery quickSearch: Filtrar tablas y listas (ejemplo con Gridview)”

  1. Jose,

    Me genero otro problema la solucion implementada…

    me quito todos los estilos de las grillas que ya tenia y me dio un error en CalendarExtender de Ajax que su ID estaba duplicado (solo en este control)…

    entonces fui a la clase CSSFriendlyAdatpers.browser y comentaria una linea de codigo y se soluciono, pero esta misma linea es la que genera que NO se filtren las cabezeras de la GridView, implemente el 2do ejemplo.

    Alguna idea a que se deba esto, hice algo mal…

  2. Hola @Netzio

    Cuando implementas CSS Friendly Adapter, renderiza los controles de ASP.NET (los que estan dentro del archivo browser) “adaptandolos”. Si tu ya estabas trabajando con estilos “embebidos” en los controles te puede “doler” un poco trabajar con este componente

    Pero para utilizar el plugin con la version 2 no es necesario utlizar el componente “CSSFriendlyAdapter”
    Es decir implementa la parte de
    OPCION 2: Generar thead en el gridview sin CSS Friendly Adapter
    que es la que genera el THEAD y borra todo lo relacionado al CSSFriendlyAdapter

  3. Hola @Leonardo
    Efectivamente es un filtro para el contenido actual, yo lo uso mayoritariamente en Listas no en tablas (Select, combos, etc)
    Si quieres algo como lo que me estas comentnado deberias ver jqGrid (recomendable) es una grilla (basada en jquery) con multiples caracteristicas, entre ellas la que necesitas.
    Aclaro que no trabaja sobre el gridview sino mas bien en un control que trabaja del lado del cliente

    Mas info
    http://www.trirand.com/blog/

    Mas info en geeks.ms 😉
    http://geeks.ms/search/SearchResults.aspx?q=jqgrid

    Espero que te sirva de ayuda o guiia

Deja un comentario

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