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 :)

Jag har tidigare jobbat mycket med webbgallerier, bilduppladdning etc. och tycker därför många av JQuerys bildfunktionerna verkar intressant. Här om dagen arbetade jag kort med JCrop som är ett plugin för att beskära bilder. Det naturliga är förstås att sedan spara bilden man beskurit, men för mitt test valde jag att skriva ut den direkti webbläsaren. Prova gärna att beskära mina blåsippor :) Mer exempel och instruktioner om hur du kan beskära bilder hittar du på JCrops hemsida.

Beskär bilder med JCrop