[Tips] Filtrar un Gridview con Jquery al presionar una tecla :)
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.
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 :P
$(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
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