Share
Hva du skal skapeBordsorter er en enkel jQuery-plugin som gir dynamisk kolonnesortering og paginering i HTML-tabellene dine. Det er en fin måte å gi sorterbare, skriptte tabeller som ikke krever at brukeren oppdaterer siden. Du kan også bruke den når du bruker Ajax i søknaden din.
Denne opplæringen vil vise frem den aktuelle koden og tre eksempler på bruk av tabeller. Du kan laste ned koden på GitHub. Vær oppmerksom på at tabellen sortering nedlasting faktisk mangler noen grafiske bilder for personsøkere, så du vil kanskje bruke mine GitHub-filer.
Mitt første eksempel viser deg hvordan du bruker Tabeller for å gi en sorterbar liste over Internett-domener til salgs. Du kan se demoen her og koden her.
Det er noen komponenter som vi trenger å sette opp for tabeller. Først må vi laste inn jQuery og tableorter plugin. Jeg vil også laste det blå CSS-temaet:
Da skal vi bygge tabellen HTML:
| Domenenavn | gTLD | Kategori | Pris | Ta kontakt med |
|---|---|---|---|---|
| geogram.co | co | Internett | $ 49 | Kjøp |
| newscloud.com | com | Nyheter | $ 19 999 | Kjøp |
| popcloud.com | com | Musikk | $ 14 999 | Kjøp |
Deretter må vi initialisere tabellen sorter når siden laster:
I eksemplet ovenfor setter jeg den fjerde kolonnen, som er priskolonnen, for å sortere i synkende rekkefølge, og jeg setter den tredje kolonnen, som er kategorikolonnen, for å sortere i stigende rekkefølge.
Når du er ferdig, bør du se noe slikt:
Hvis du ikke laster dine tabeller dynamisk fra en database, lurer du kanskje på om det er en enklere måte å generere HTML-tabellkode fra lange lister. Det er! Jeg beskriver den i Hvordan Parkere, Liste og selg Domenene dine.
I utgangspunktet bruker jeg et Google Disk-regneark som viser mine domener, kategorier og priser, og jeg bruker concatenate-funksjoner til å generere Apache-serveraliaser, JavaScript-priskode og tabellordstabellraden HTML:
Slik ser en sammenliknet funksjon ut i Google Disk:
Accentsconagua
= KJEDE.SAMMEN (""""F2" """B2," """D2", ""$ ", TO_DOLLARS (E2)," """G2" "" ")Jeg bruker Domena-temaet tilgjengelig på Envato Market som destinasjonssider for hvert domene:
Jeg har tilpasset JavaScript i temaet for å endre prisen basert på domenet som er lastet. Jeg tror at nyere versjoner av Domena håndterer flere domener mer elegant.
Nå viser vi deg hvordan du implementerer personsøk med tabeller. Du kan se demoen her og få koden her. Det skal se slik ut:
Denne gangen vil vi initialisere tabeller i stikkord. Vi legger også til tabulator-plugin-skriptet:
Vi legger inn HTML-koden div for personsøker under bordet:
Det er det.
Merk at jeg fant personsøkerikonene blitt slettet fra tabellen GitHub-siden, så jeg lastet dem manuelt fra demoen. Det kan være enklest for deg å få dem fra den gjengede versjonen av Tuts + -arkivet.
Nå ser vi på hvordan du bruker jQuery til å fylle en tabellbordstabell dynamisk. Til å begynne med, vil vi initialisere et tabellbordstabell med bare .IO-domener. Det ser slik ut:
Når du klikker på Legg til. COM domener link, vil du se at tabellen utvides med .COM-domener.
Du kan se demoen her og koden her. HTML-koden for Ajax-forespørselen med .COM-domenene er her.
Her er koden som reagerer på klikkhendelsen, og laster inn flere rader via Ajax:
p> Legg til .COM domener via AJAX
Tabeller kan definitivt forbedre brukeropplevelsen hvis de brukes godt.
Jeg håper du har funnet denne opplæringen nyttig. Ta gjerne inn korrigeringer, spørsmål eller kommentarer nedenfor. Du kan også nå meg på Twitter @ reifman eller email meg direkte.
