Sortera tabeller på webben

Till min stora glädje ser jag att tabeller på webben allt oftare används, som de ska, för att presentera data snarare än för design.

En nackdel med presentation av data i tabeller på webben är dock generellt att det inte går att sortera tabellen enligt valfri kolumn. I andra applikationer är det mer regel än undantag att det just går att sortera.

Många utvecklare löser detta genom att låta användarens klick på en rubrik leda till en ny fråga till databasen, sidan laddas om och voilá! så presenteras tabellen med en ny sortering. Dilemmat är dock att detta är resurskrävande och en ny databasfråga tar tid att ställa.

Måste vi verkligen hämta all data igen från databasen, bara för att sortera om den? Givetvis inte. Ta en titt på sammanställningen nedan över några av mina drömmotorcyklar.

Sortera kolumner utan att ladda om sidan

Leverantör Modell Slagvolym (cc) Pris
Aprilia Pegaso 650 75 998
BMW F650 GS 652 80 500
Honda Transalp XL650V 650 69 901
Suzuki V-strom 650 650 79 900
Triumph Tiger 955 114 990
Yamaha XT660R 660 54 900

Klicka på en rubrik och datat sorteras om i stigande eller fallande ordning, om du har JavaScript.

Och eftersom du undrar, visst är detta en lösning som inte ställer till bekymmer avseende tabellens tillgänglighet. Koden för tabellen följer standarder och W3Cs rekommendationer.

Om du vill erbjuda JavaScript-fattiga användare en alternativ lösning för sotering går det fortfarande att komplettera med en lösning som hämtar ny data och laddar om sidan. Huruvida det behovet finns måste du själv ta ställning till. Lösningen som presenteras här ger dig dock ett snabbt och smidigt sätt att göra tabellerna dynamiska för merparten av dina besökare.

Så här gör du för att möjliggöra sortering av dina kolumner

1. Inkludera skriptet, så här:

<script src="sorttable.js">></script>

2. Markera tabellen som sorteringsbar genom att ange klassen ”sortable”:

<table class="sortable">

3. Säkerställ att tabellen har ett id-nummer:

<table class="sortable" id="unikt_id">

Skriptet bifogas. Glöm inte att snygga till tabellen med CSS.

(Källa: The Daily Kryogenix: sorttable)

❣️Julerbjudande!

Köp min handbok Digital omtanke som julgåva till kunder eller kollegor. När du beställer 10 böcker eller fler direkt från mig så kostar det 95kr per bok + moms/frakt. Dessutom skänker jag 10 kronor per bok till Girl Power-gåvan hos Plan Sverige. Utbildning och förstärkta rättigheter för utsatta flickor är bland det viktigaste vi kan göra för världen. Mejla din önskade beställning till per@axbom.se så tar vi det därifrån.
Per Axbom

Per Axbom

@axbom

Per Axbom är kommunikationsvetaren som föddes i Liberia. I 20 år har han utbildat den digitala yrkeskåren och hjälpt organisationer med digital användbarhet och tillgänglighet. Per gör teknik trygg och omtänksam genom reflektivt resonerande, hänsynstagande design, coaching och utbildning. Du kan höra hans röst på UX Podcast.

Digital omtanke bokomslag Pers nya handbok om etik i teknikbranschen, Digital omtanke, finns att köpa hos Bokus. Den engelska upplagan finns även i Kindle-format hos Amazon.

Boka tid med Axbom

Leave a Reply

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.

  Subscribe  
Notify of