Att dela upp data på sidor (siduppdelning, eng. paging), göra den sökbar, sortera kolumner är en uppgift som är vanlig för den som jobbar i PHP. Hämtar man ut data från en enkel databastabell är det inga problem. Men ibland är det kanske mer komlicerad data och onödigt mycket jobb, när det enkelt kan lösas på klientsidan istället, det vill säga med javascript.
jQuery och ett plugin som heter tablesorter och tablesorter.pager gör det väldigt smidigt att dela upp tabelldata och ordna enkel sortering av kolumnerna.
Tablesorter med paging
Du behöver ladda hem och inkludera filerna i HTML-kodens head.
1 2 3 | <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script> |
Skapa en tabell i din sida med lita data i (jag hittar på lite i mitt exempel)…
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <table id="myTable" class="tablesorter"> <thead> <tr> <th>Foo</th> <th>Bar</th> </tr> </thead> <tbody> <?php // Låt säg att vi har en stor array, // som heter $myArray, med // massor data foreach ($myArray as $ma) { ?> <tr> <td><?php echo $ma['foo']; ?></td> <td><?php echo $ma['bar']; ?></td> </tr> <?php } ?> </tbody> </table> |
Starta jQuery, tablesorter och paging-pluginet:
1 2 3 4 5 6 7 | <script type="text/javascript"> $(document).ready(function() { $("table") .tablesorter() .tablesorterPager({container: $("#pager")}); }); </script> |
Ok, nästan där, vi ska ha någon som hjälper oss bläddra mellan sidorna också. Så här ser koden ut i exemplet på tablesorters hemsida:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <div id="pager" class="pager"> <form> <img src="icons/first.png" class="first"/> <img src="icons/prev.png" class="prev"/> <input type="text" class="pagedisplay"/> <img src="icons/next.png" class="next"/> <img src="icons/last.png" class="last"/> <select class="pagesize"> <option selected="selected" value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> </select> </form> </div> |
Bildikonerna får du skapa egna eller spara från hemsidan. Det finns teman och du kan dona med CSS för att få det snyggare men basfunktionen finns där.
Det mest i det här inlägget är hämtat från tablesorters hemsida, förutom den lilla korta PHP-array jag hittade på… men tanken var att visa hur lite PHP som behövs för en mycket funktionell datapresentation med sortering och siduppdelning. Hoppas det kommer till nytta :)