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/
- 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
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 |
 | 
 |
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
aqui podemos ver que filtra el texto que contiene tambien
 |
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í.
Enlaces
Comparte este post: