Programmazione Web Italia Codice, metodologie e idee dal mondo dello Sviluppo WebPWI Programmazione Web ItaliaHTMLCSSJSEng.NodeSecuritySegui su:
Sei in:
... Abbiamo ricreato una semplice e funzionale tabella che mostra i dati di tre ipotetici utenti; una ottima soluzione in caso di tabelle molto brevi e dati statici, ma cosa succederebbe se i dati fossero nell'ordine delle decine o centinaia? E cosa succederebbe se questi dati fossero serviti tramite JSON da servizi esterni? In questi casi è necessario sviluppare una soluzione dinamica che si occupi di eseguire il fetch (reperimento) dei dati ed il conseguente popolamento dinamico della tabella.
Lo vediamo in questo capitolo.
L'obiettivo è quello di popolare la tabella in maniera dinamica attraverso dati provenienti da una sorgente remota, per fare questo sarà necessario aggiungere un file JavaScript in cui gestiremo la chiamata remota e creazione delle righe della tabella. La sorgente esterna sarà fornita dalla url: https://jsonplaceholder.typicode.com/users, un servizio a scopo didattico che fornisce una lista di utenti in formato JSON.
La situazione iniziale prevede un file HTML simile al precedente, ma in questo caso non ci sarà alcun contenuto all'interno del tag <tbody>: questo sarà aggiunto dinamicamente. Ecco il contenuto. Continua...
Funzionalità come il sorting e la paginazione permettono di interagire con una tabella in maniera più veloce ed efficente, spesso ci si affida a soluzioni di terzi, ma in questa guida vorrei farvi provare a sviluppare una tabella dinamica partendo da zero e utilizzando solo le versioni vanilla di HTML, JavaScript e CSS. Spero di esservi utile!
La nostra tabella dinamica si svilupperà in maniera progressiva partendo da una semplice soluzione statica con i dati tabellari scritti a mano dallo sviluppatore, procedendo con l'inserimento di dati ottenuti attraverso una chiamata HTTP e aggiungendo, infine, funzionalità più avanzate come la paginazione, il sorting e il filtering. Le varie sezioni saranno elaborate in momenti differenti e potrebbero non essere ancora disponibili: incoraggiate il mio lavoro condividendo questa pagina o mettendo un like!
Per iniziare e per ripassare un poco l'argomento, sviluppiamo una semplice tabella HTML utilizzando i tag previsti nelle specifiche HTML5. Qui di seguito scrivo il codice che definisce una tabella per un insieme di ipotetici utenti. Continua...