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 160
Item 161
Item 162
Item 163
Item 164
Item 165
Item 166
Item 167
Item 168
Item 169
Item 170
Item 171
Item 172
Item 173
Item 174
Item 175
Item 176
Item 177
Item 178
Item 179

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">
         <t:if test="showPrev">
         <li>
            <!-- I use the mixing LoadingOnClick, but it's optional -->
            <a rel="nofollow" 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>
         </t:if>
         <t:if test="showNext">
         <li>
            <!-- I use the mixing LoadingOnClick, but it's optional -->
            <a rel="nofollow"  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>
         </t:if>
      </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>