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…
- uitablefilter http://plugins.jquery.com/project/uiTableFilter
http://gregweber.info/projects/uitablefilter
demo: http://gregweber.info/projects/demo/flavorzoom.html
- quickSearch
http://plugins.jquery.com/project/quicksearch
demo: http://lomalogue.com/jquery/quicksearch/
Nuevo repositorio del plugin en GitHub: https://github.com/riklomas/quicksearch - 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:
- HTML 4.01 Specification > Tables > Row groups: the THEAD, TFOOT, and TBODY elements
- HTML Techniques for Web Content Accessibility Guidelines 1.0 > Tables
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 |
|
|
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
|
Aquí encierra a la tabla HTML con un DIV, y además coloca en cada fila estilos CSS para poder “personalizarlos”
|
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)
Luego tenemos que tener una tabla y input text de donde se dispara el plugin
En este ejemplo lo obtengo así:
-
- Obtener el Id del lado del cliente del Textbox
- Idem del Gridview
- 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 |
 |
Filtrando: Yoda Como el encabezado no tiene la palabra yoda se filtra tambien ;( 
Filtro: no |
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
Esto es porque se actua por el selector:
$(txtFiltro).quicksearch(grillaJedis + ‘ tbody tr’);
sobre el las filas del cuerpo
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
- jQuery plugin quickSearch
quickSearch is a plug-in for quickly searching through large data such as tables and lists
http://plugins.jquery.com/project/quicksearch
Nuevo repositorio del plugin en GitHub: https://github.com/riklomas/quicksearch - CSS Friendly Adapter
http://cssfriendly.codeplex.com/
http://www.asp.net/CssAdapters/ - HTML 4.01 Specification > Tables > Row groups: the THEAD, TFOOT, and TBODY elements
- HTML Techniques for Web Content Accessibility Guidelines 1.0 > Tables
