Share
Vad du ska skapaTabeller är ett enkelt jQuery-plugin som ger dynamisk kolonnsortering och paginering i HTML-tabellerna. Det är ett bra sätt att tillhandahålla sorterbara, skriptatabeller som inte kräver att användaren uppdaterar sidan. Du kan också använda den när du använder Ajax i din ansökan.
Denna handledning kommer att visa upp aktuell kod och tre exempel på att använda tabeller. Du kan ladda ner koden på GitHub. Observera att nedladdningen av tabellvaror faktiskt saknar några grafiska bilder för sina personsökare, så du kanske vill använda mina GitHub-filer.
Mitt första exempel visar hur du använder tabeller för att ge en sorterbar lista över internetdomäner till salu. Du kan se demoen här och koden här.
Det finns några komponenter som vi behöver installera för tabeller. Först måste vi ladda jQuery och tabeller-plugin. Jag laddar också dess blå CSS-tema:
Sedan bygger vi tabellen HTML:
| Domän namn | gTLD | Kategori | Pris | Kontakta |
|---|---|---|---|---|
| geogram.co | co | internet | $ 49 | Inköp |
| newscloud.com | com | Nyheter | $ 19999 | Inköp |
| popcloud.com | com | musik | $ 14999 | Inköp |
Därefter måste vi initialisera tabellvaror när sidan laddas:
I exemplet ovan ställer jag in den fjärde kolumnen, som är priskolumnen, för sortering i fallande ordning, och jag ställer in den tredje kolumnen, vilken är kategorikolumnen, för att sortera i stigande ordning.
När du är klar bör du se något så här:
Om du inte laddar dina tabeller dynamiskt från en databas kanske du undrar om det finns ett enklare sätt att generera HTML-tabellkod från långa listor. Det finns! Jag beskriver det i Parkera, lista och sälja dina domäner.
I grund och botten använder jag ett Google Drive-kalkylblad som listar mina domäner, kategorier och priser, och jag använder concatenate-funktioner för att generera Apache-serveralias, JavaScript-prissättningskod och tabellen tabell tabellrad:
Så här ser en sammanfattande funktion ut i Google Drive:
Accentsconagua
= CONCATENATE (""""F2" """B2" """D2" ""$ ", TO_DOLLARS (E2)," """G2" "" ")Jag använder Domena-temat tillgängligt på Envato Market som målsidor för varje domän:
Jag har anpassat JavaScript i temat för att ändra priset baserat på den domän som laddas. Jag tror att de nya versionerna av Domena hanterar flera domäner mer elegant.
Nu visar vi dig hur du genomför sökning med tabeller. Du kan se demoen här och få koden här. Det borde se ut så här:
Den här gången kommer vi att initiera tabeller i märka. Vi lägger också till tabellen Tablesorter plugin script:
Vi lägger HTML-filen div för personsökaren under bordet:
Det är allt.
Observera att jag fann att personsökarens ikoner hade tagits bort från tabellen GitHub-webbplatsen, så jag hämtade dem manuellt från demo. Det kan vara enklast för dig att få dem från den forked versionen av Tuts + repository.
Nu ska vi titta på hur man använder jQuery för att fylla en tabellbordstabell dynamiskt. Till att börja med initierar vi ett tabeller för tabeller med bara .IO-domäner. Det kommer att se ut så här:
När du klickar på Lägg till .COM-domäner länk, ser du att tabellen expanderar med .COM-domäner.
Du kan se demoen här och koden här. HTML för Ajax-förfrågan med .COM-domänerna är här.
Här är koden som svarar på klickhändelsen och laddar ytterligare rader via Ajax:
p> Lägg till .COM-domäner via AJAX
Tabeller kan definitivt förbättra användarupplevelsen om de används bra.
Jag hoppas att du har hittat denna handledning användbar. Vänligen gärna posta rättelser, frågor eller kommentarer nedan. Du kan också nå mig på Twitter @ reifman eller maila mig direkt.
