Share
Ce veți creaTablesorter este un plugin simplu jQuery care oferă sortarea și paginarea dinamică a coloanelor în tabelele HTML. Este o modalitate frumoasă de a furniza tabele care se potrivesc, scripted, care nu necesită reîmprospătarea paginii de către utilizator. De asemenea, puteți să o utilizați atunci când utilizați Ajax în aplicația dvs..
Acest tutorial va prezenta codul real și trei exemple de utilizare a Tablesorter. Puteți descărca codul la GitHub. Rețineți că descărcarea Tablesorter lipsește de fapt câteva imagini grafice pentru paginile sale de pagini, deci este posibil să doriți să utilizați fișierele mele GitHub.
Primul meu exemplu vă arată cum să utilizați Tablesorter pentru a furniza o listă de domenii de domeniu de vânzare. Puteți vedea demo-ul aici și codul aici.
Există câteva componente pe care trebuie să le punem la dispoziție pentru Tablesorter. În primul rând, trebuie să încărcați jQuery și pluginul tablesorter. De asemenea, îmi voi încărca tema albastră CSS:
Apoi vom construi masa HTML:
| Numele domeniului | gTLD | Categorie | Preț | a lua legatura |
|---|---|---|---|---|
| geogram.co | co | Internet | $ 49 | Cumpărare |
| newscloud.com | com | Știri | $ 19999 | Cumpărare |
| popcloud.com | com | Muzică | $ 14999 | Cumpărare |
După aceasta, trebuie să inițializăm Tablesorter când pagina se încarcă:
În exemplul de mai sus, am setat a patra coloană, care este coloana cu prețul, pentru a sorta în ordine descrescătoare și am setat a treia coloană, care este coloana categoriei, pentru a sorta în ordine crescătoare.
După ce ați terminat, ar trebui să vedeți ceva de genul:
Dacă nu încărcați dinamic tabelele dintr-o bază de date, s-ar putea să vă întrebați dacă există o modalitate mai ușoară de a genera codul de tabel HTML din liste lungi. Există! Îl descriu în modul de parcare, lista și vânzarea domeniilor dvs..
Practic, utilizez o foaie de calcul Google Drive care afișează domeniile, categoriile și prețurile mele și folosesc funcții concatenate pentru a genera aliasuri de server Apache, cod de stabilire a JavaScript-ului și rândul de tabelă Tablesorter HTML:
Iată cum arată funcția concatenate în Google Drive:
= CONCATENATE (“"" „)"F2," ""„B2“ """D2," ""$ ", TO_DOLLARS (E2)," """G2," ""
Folosesc tema Domena disponibilă la Envato Market ca pagini de destinație pentru fiecare domeniu:
Am personalizat JavaScript în temă pentru a modifica prețul pe baza domeniului încărcat. Cred că versiunile mai noi ale Domena se ocupă de mai multe domenii mai elegant.
Acum, vă vom arăta cum să implementați paginarea cu Tablesorter. Puteți vedea demo-ul aici și obține codul aici. Ar trebui să arate ceva de genul:
De data aceasta, vom inițializa Tablesorter în etichetă. De asemenea, vom adăuga scriptul pluginului Tablesorter:
Vom plasa codul HTML div pentru pagerul de sub masă:
Asta e.
Rețineți că am găsit pictogramele pager care au fost șterse de pe site-ul Tablesorter GitHub, așa că le-am descărcat manual din demo. Ar putea fi mai ușor să le obțineți de la versiunea furcă a depozitului Tuts +.
Acum vom examina cum să folosim jQuery pentru a popula dinamic o tabelă Tablesorter. Pentru început, vom inițializa o tabelă Tablesorter cu doar domenii .IO. Se va arata cam asa:
Când faceți clic pe Adăugați domenii .COM link, veți vedea extensia tabelului cu domenii .COM.
Puteți vedea demo-ul aici și codul aici. HTML-ul pentru solicitarea Ajax cu domeniile .COM este aici.
Iată codul care răspunde la evenimentul de clic, încărcând rânduri suplimentare prin Ajax:
p> Adăugați domenii .COM prin AJAX
Tablesorter poate îmbunătăți cu siguranță experiența utilizatorului dacă este bine folosită.
Sper că ați găsit acest tutorial util. Nu ezitați să postați corecturi, întrebări sau comentarii de mai jos. Puteți să mă contactați și pe Twitter @reifman sau să mă trimiteți direct prin e-mail.
Accentsconagua