Share
Cosa starai creandoTablesorter è un semplice plugin jQuery che fornisce ordinamento e impaginazione dinamica delle colonne nelle tabelle HTML. È un buon modo per fornire tabelle programmabili, che non richiedono all'utente di aggiornare la pagina. Puoi anche usarlo quando usi Ajax nella tua applicazione.
Questo tutorial mostrerà il codice effettivo e tre esempi di utilizzo di Tablesorter. Puoi scaricare il codice su GitHub. Si noti che il download di Tablesorter in realtà manca di alcune immagini grafiche per i suoi cercapersone, quindi potresti voler usare i miei file GitHub.
Il mio primo esempio mostra come utilizzare Tablesorter per fornire un elenco ordinabile di domini Internet in vendita. Puoi vedere la demo qui e il codice qui.
Ci sono alcuni componenti che dobbiamo configurare per Tablesorter. Per prima cosa, dobbiamo caricare jQuery e il plugin per i tablesorter. Caricherò anche il suo tema CSS blu:
Quindi, costruiremo la tabella HTML:
| Nome del dominio | gTLD | Categoria | Prezzo | Contatto |
|---|---|---|---|---|
| geogram.co | co | Internet | $ 49 | Acquista |
| newscloud.com | com | notizia | $ 19999 | Acquista |
| popcloud.com | com | Musica | $ 14999 | Acquista |
Dopodiché, è necessario inizializzare Tablesorter quando viene caricata la pagina:
Nell'esempio sopra, sto impostando la quarta colonna, che è la colonna del prezzo, per ordinare in ordine decrescente, e sto impostando la terza colonna, che è la colonna della categoria, per ordinare in ordine ascendente.
Una volta fatto, dovresti vedere qualcosa di simile a questo:
Se non stai caricando le tue tabelle dinamicamente da un database, ti starai chiedendo se esiste un modo più semplice per generare codice tabella HTML da lunghi elenchi. C'è! Lo descrivo in Come parcheggiare, elencare e vendere i tuoi domini.
Fondamentalmente, sto utilizzando un foglio di calcolo di Google Drive che elenca i miei domini, categorie e prezzi e utilizzo le funzioni concatenate per generare alias di server Apache, codice di prezzi JavaScript e HTML di righe della tabella Tablesorter:
Ecco come appare una funzione concatenata in Google Drive:
Accentsconagua
= CONCATENA (""""F2" """B2" """D2" ""$ ", TO_DOLLARS (E2)," """G2" "" ")Uso il tema Domena disponibile su Envato Market come pagine di destinazione per ciascun dominio:
Ho personalizzato JavaScript nel tema per modificare il prezzo in base al dominio caricato. Penso che le versioni più recenti di Domena gestiscano più domini in modo più elegante.
Ora, ti mostreremo come implementare il paging con Tablesorter. Puoi vedere la demo qui e ottenere il codice qui. Dovrebbe assomigliare a qualcosa di simile a questo:
Questa volta, inizializzeremo Tablesorter nel etichetta. Aggiungeremo anche lo script del plug-in Tablesorter:
Inseriremo l'HTML div per il cercapersone sotto la tabella:
Questo è tutto.
Si noti che ho trovato che le icone del cercapersone erano state eliminate dal sito GitHub di Tablesorter, quindi le ho scaricate manualmente dalla demo. Potrebbe essere più semplice recuperarli dalla versione biforcuta del repository Tuts +.
Ora vedremo come usare jQuery per compilare una tabella Tablesorter in modo dinamico. Per iniziare, inizializzeremo una tabella Tablesorter con solo domini .IO. Assomiglierà a qualcosa del genere:
Quando fai clic sul Aggiungi domini .COM link, vedrai la tabella espandersi con i domini .COM.
Puoi vedere la demo qui e il codice qui. L'HTML per la richiesta Ajax con i domini .COM è qui.
Ecco il codice che risponde all'evento click, caricando righe aggiuntive tramite Ajax:
p> Aggiungi domini .COM tramite AJAX
Tablesorter può sicuramente migliorare l'esperienza dell'utente se usato bene.
Spero tu abbia trovato utile questo tutorial. Non esitate a postare correzioni, domande o commenti qui sotto. Puoi anche raggiungermi su Twitter @reifman o mandarmi un'email direttamente.
