Share
Wat je gaat creërenTablesorter is een eenvoudige jQuery-plug-in die dynamische kolomsortering en paginering biedt in uw HTML-tabellen. Het is een leuke manier om sorteerbare, scripttabellen te bieden waarbij de gebruiker de pagina niet hoeft te vernieuwen. Je kunt het ook gebruiken als je Ajax gebruikt in je applicatie.
In deze zelfstudie worden de daadwerkelijke code en drie voorbeelden van het gebruik van Tablesorter getoond. Je kunt de code downloaden op GitHub. Merk op dat de download van Tablesorter eigenlijk een paar grafische afbeeldingen voor zijn pagers mist, dus misschien wil je mijn GitHub-bestanden gebruiken.
Mijn eerste voorbeeld laat zien hoe u Tablesorter gebruikt om een sorteerbare lijst met internetdomeinen te koop aan te bieden. Je kunt de demo hier en de code hier bekijken.
Er zijn een paar componenten die we moeten instellen voor Tablesorter. Eerst moeten we jQuery en de tablesorter-plugin laden. Ik zal ook het blauwe CSS-thema laden:
Vervolgens maken we de HTML-tabel voor de tabel:
| Domeinnaam | gTLD | Categorie | Prijs | Contact |
|---|---|---|---|---|
| geogram.co | co | internet | $ 49 | Aankoop |
| newscloud.com | com | Nieuws | $ 19.999 | Aankoop |
| popcloud.com | com | Muziek | $ 14.999 | Aankoop |
Hierna moeten we Tablesorter initialiseren wanneer de pagina laadt:
In het bovenstaande voorbeeld stel ik de vierde kolom, de prijskolom, in aflopende volgorde in, en stel ik de derde kolom, de categoriekolom, in oplopende volgorde in.
Als u klaar bent, ziet u iets als dit:
Als u uw tabellen niet dynamisch vanuit een database laadt, vraagt u zich misschien af of HTML-tabelcode vanuit lange lijsten eenvoudiger kan worden gegenereerd. Er bestaat! Ik beschrijf het in Hoe u uw domeinen kunt parkeren, lijsten en verkopen.
In principe gebruik ik een Google Drive-spreadsheet waarin mijn domeinen, categorieën en prijzen worden vermeld en ik gebruik concatenate-functies om Apache-serveraliassen, JavaScript-prijscode en de HTML-tabelrij HTML-tabel te genereren:
Dit is hoe een concatenate-functie eruit ziet in Google Drive:
Accentsconagua
= TEKST.SAMENVOEGEN (""""F2" """B2," """D2" ""$ ", TO_DOLLARS (E2)," """G2," "" ")Ik gebruik het Domena-thema dat beschikbaar is op Envato Market als bestemmingspagina's voor elk domein:
Ik heb JavaScript aangepast in het thema om de prijs te wijzigen op basis van het domein dat is geladen. Ik denk dat de nieuwere versies van Domena meerdere domeinen eleganter behandelen.
Nu laten we u zien hoe u paging met Tablesorter implementeert. Je kunt de demo hier bekijken en de code hier ophalen. Het zou er ongeveer zo uit moeten zien:
Deze keer initialiseren we Tablesorter in de label. We voegen ook het Tablesorter plug-inscript toe:
We plaatsen de HTML div voor de pager onder de tabel:
Dat is het.
Merk op dat ik vond dat de pager-iconen waren verwijderd van de Tablesorter GitHub-site, dus ik heb ze handmatig gedownload van de demo. Het is misschien het gemakkelijkst om ze uit de gevorkte versie van de Tuts + -repository te halen.
Nu zullen we kijken hoe u jQuery kunt gebruiken om dynamisch een Tablesorter-tabel te vullen. Om te beginnen initialiseren we een Tablesorter-tabel met alleen .IO-domeinen. Het ziet er ongeveer zo uit:
Wanneer u op klikt Voeg .COM-domeinen toe link, ziet u de tabel worden uitgebreid met .COM-domeinen.
Je kunt de demo hier en de code hier bekijken. De HTML voor het Ajax-verzoek met de .COM-domeinen is hier.
Hier is de code die reageert op de klikgebeurtenis, extra rijen laden via Ajax:
p> Voeg .COM-domeinen toe via AJAX
Tablesorter kan de gebruikerservaring zeker verbeteren als deze goed wordt gebruikt.
Ik hoop dat je deze tutorial nuttig hebt gevonden. Aarzel niet om correcties, vragen of opmerkingen hieronder te plaatsen. Je kunt me ook bereiken via Twitter @reifman of mij rechtstreeks een e-mail sturen.
