Thursday, June 23, 2011

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!