Filtrare le righe di una tabella con JQuery

Un cliente mi ha chiesto di inserire sul sito la possibilità di filtrare i dati di una tabella. Come spesso accade, l'applicativo da modificare non è stato sviluppato dal sottoscritto, né da suoi colleghi, per cui il modo più rapido, senza sorgenti o ricompilazioni, è agire lato client.

In questo, mi è venuto in aiuto JQuery. Strano, vero? Alla fine è il mio miglior consulente per attività di questo tipo.

Scopiazziando, ovviamente, da un paio di siti, completo i loro articoli con lo script corretto da utilizzare: semplice, rapido e sopratutto "fa scena", per la rapidità e il behaviour decisamente web 2.0.

1) La tabella da filtrare deve avere il codice class="filterable" (se usate datagrid .NET, CssClass="filterable").

2) Aggiungere in testa alla tabella, il codice seguente: è la casella di testo che farà il filtro sulle righe.

Filter:

3) Ora aggiungere il codice seguente:

$(document).ready(function(){

//add index column with all content.

$(".filterable tr:has(td)").each(function(){

var t = $(this).text().toLowerCase(); //all row text

$("")

.hide().text(t).appendTo(this);

});//each tr

$("#FilterTextBox").keyup(function(){

var s = $(this).val().toLowerCase().split(" ");

//show all rows.

$(".filterable tr:hidden").show();

$.each(s, function(){

$(".filterable tr:visible .indexColumn:not(:contains('"

+ this + "'))").parent().hide();

});//each

});//key up.

});//document.ready

Questo codice, definisce:

- le modalità di filtro sulle celle: in pratica, il filtro agisce su tutte le celle.

- la funzione keyu che esegue il filtro ad ogni carattere inserito (filtro in tempo reale!)

Ovviamente, in testa, occorre inserire i riferimenti alle librerie JQuery ;-)

Buon divertimento!