Pagination example

Description

Most pages require an implementation for pagination of results. The best approach for me is to use AJAX, using Zones, some javascript to maintain the correct URL and some mixin to user experience.

You can see the example below with results and pagination with "prev" and "next" button with an optional mixin to show the progress of the request.

Demo

Item 20
Item 21
Item 22
Item 23
Item 24
Item 25
Item 26
Item 27
Item 28
Item 29
Item 30
Item 31
Item 32
Item 33
Item 34
Item 35
Item 36
Item 37
Item 38
Item 39

Source codes

<t:layout 
   xmlns:t="http://tapestry.apache.org/schema/tapestry_5_0_0.xsd" 
   xmlns:p="tapestry:parameter" >
   
   <h3>${message:page.description}</h3>
   <t:textoutput value="message:ajax.pagination.description" />
   
   <h3>${message:page.demo}</h3>
   <t:zone t:id="paginationZone" id="paginationZone">
      
      <t:loop source="items" value="item">
      
         <div class="panel panel-default">${item}</div>
      
      </t:loop>
      
      <ul class="pager">
         <li>
            <!-- I use the mixing LoadingOnClick, but it's optional -->
            <a href="#" t:id="prevPage" t:type="EventLink" t:event="changePage" t:context="prev" t:zone="^" 
               t:mixins="LoadingOnClick" t:text="loading"><span>${message:ajax.pagination.prev}</span>
            </a>
         </li>
         <li>
            <!-- I use the mixing LoadingOnClick, but it's optional -->
            <a href="#" t:id="nextPage" t:type="EventLink" t:event="changePage" t:context="next" t:zone="^" 
               t:mixins="LoadingOnClick" t:text="loading"><span>${message:ajax.pagination.next}</span>
            </a>
         </li>
      </ul>
      
   </t:zone>
   
   
   <h3>${message:page.sourcecode}</h3>
   <t:tabGroup>
      <t:codeTab source="classpath:es/carlosmontero/webapp/t5devutil/pages/ajax/PaginationPage.tml"/>
      <t:codeTab source="classpath:es/carlosmontero/webapp/t5devutil/pages/ajax/PaginationPage.java" />
      <t:codeTab classpathSource="/META-INF/modules/pagination.js" />
      <t:codeTab source="classpath:es/carlosmontero/webapp/t5devutil/mixins/LoadingOnClick.java" />
      <t:codeTab classpathSource="/META-INF/modules/load-on-click.js" />
   </t:tabGroup>
</t:layout>