Sortering på tabeller
Hvis der er en ting jeg hader, så er det at lave trivielle tabeller med sortering. Jeg har dog efterhånden fundet den løsning jeg bedst kan li’.
Typisk vil man ha’ noget html som dette:
1 2 3 4 5 | <table> <tr> <th><a href="list.php?sort=name&type=asc">Navn</a></th> <th><a href="list.php?sort=age&type=asc">Alder</a></th> [...] |
Men det er pænt irriterende at generere linket, samt holde styr på om man sorterer stigende eller faldende, og der kommer sikkert også andre parametre med ind i URL’en. Så det har man ikke lyst til. Jeg ved godt at der findes Javascripts der kan sortere tabeller, men det virker kun hvis man ser hele tabellen, og ikke hvis der er flere sider.
Min løsning er at lave en form med nogle skjulte felter, og med manipulere den med jQuery når man klikker på th’erne.
Min tabel vil så se sådan ud:
1 2 3 4 5 | <table> <tr> <th x:name="name" class="sortable">Navn</th> <th x:name="age" class="sortable">Alder</th> [...] |
I mit stylesheet har jeg selvfølgelig en
1 2 3 | table th.sortable { cursor:pointer; } |
Og måske en text-decoration:underline så man kan se at man kan trykke på feltet.
Så laver jeg en form med to skjulte felter jeg bruger til at sortere med:
1 2 3 4 | <form action="list.php" method="get" id="form"> <input type="hidden" id="order_by" name="order_by" value="<{$smarty.get.order_by|escape|default:"name"}>"/> <input type="hidden" id="order_type" name="order_type" value="<{$smarty.get.order_type|escape|default:"asc"}>"/> </form> |
Derefter noget jQuery:
1 2 3 4 5 6 7 8 9 | <script type="text/javascript"> $(document).ready(function() { $("th.sortable").click(function() { $("#order_by").val($(this).attr("x:name")); $("#order_type").val($("#order_type").val() == "desc" ? "asc" : "desc"); $("#form").submit(); }); }); </script> |
Comments
2 Responses to “Sortering på tabeller”
Leave a Reply
Om websmed.dk
Jeg hedder Morten, og jeg har udviklet webapplikationer siden slutningen af 90'erne.
Jeg vil her dele ud af min erfaring, og med jævne mellemrum poste nogle tips og tricks, samt løsningsforslag på generelle dagligdags problemstillinger.
Jeg har en forkærlighed for PHP og MySQL, hvorfor I nok vil se flest indlæg der vedrører den gren af webudvikling.
Jeg har en anden blog af mere personlig karakter på mbn.dk, hvor I kan finde kontaktmuligheder m.m.
Mine indlæg vil tit være baseret på problemstillinger i mit daglige virke, eller i mit eget firma MRLYTICS, hvor jeg sælger kundeundersøgelser samt kundedatabaser.
Denne side er hostet hos slicehost.
Hvis du nu ikke har så meget data at sorterer og du samtidigt holder af jQ. Er jQuery tablesorter så ikke sagen?
Jo, så er det helt fint. Problemet med jQuery er bare at det kun kan sortere på det data du kan se, så hvis du har en tabel med mange sider i, så kan du ikke bruge jQuery.