Il problema

Al giorno d’oggi, verso la fine degli anni 201x, ancora molte applicazioni web usano tabelle HTML statiche come componente principale dell’interfaccia utente. Qui di seguito un esempio preso da ]project-open[ (vers. 5.0.2.4.0), una ben nota applicazione enterprise ed open source per la gestione di progetti, ricchissima di funzionalità.

Le tabelle HTML statiche vanno bene quando sono relativamente piccole ma, appena diventano più grandi dello spazio disponibile sullo schermo, l’intestazione può diventare non visibile quando si leggono righe nella parte inferiore della tabella. Allo stesso modo, quando si leggono celle nella parte destra della tabella, alcune colonne di sinistra possono diventare non visibili. Questo impone agli utenti di saltare continuamente dall’alto al basso (o da sinistra a destra) mentre leggono la tabella.

La soluzione

La soluzione è molto semplice e consiste nell’avere tabelle che:

• non si muovono (troppo) sullo schermo;
• hanno contenuti scrollabili;
• hanno l’intestazione fissa (e anche il pié di pagina se necessario);
• hanno delle colonne fisse a sinistra e/o a destra se necessario.

Ci sono svariate librerie Ajax/jQuery in grado di implementare tabelle dinamiche con le caratteristiche elencate sopra; fra queste librerie Spazio IT ha selezionato DataTables jQuery Plug-in, forse la più completa.

Dentro il cofano

Tutte queste librerie Ajax/jQuery usano tabelle e divisioni nascoste per implementare comportamenti dinamici come lo scorrimento; nel far questo modificano la struttura DOM originale della pagina, invalidando il codice che preleva i dati dagli input fields dei forms.
Fortunatamente si può utilizzare il metodo $() di jQuery per estrarre il contenuto di qualsiasi nodo, a prescindere dalla sua posizione, ed una successiva chiamata Ajax/jQuery al server può rimpiazzare la chiamata GET/POST originale.

Il seguente esempio mostra un’estensione di ]project-open[ implementata da Spazio IT che ha degli input fields all’interno di una tabella scrollabile.

Le chiamate Ajax/jQuery al server sono state realizzate usando il jQuery Redirect Plug-in.