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

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)