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 140
Item 141
Item 142
Item 143
Item 144
Item 145
Item 146
Item 147
Item 148
Item 149
Item 150
Item 151
Item 152
Item 153
Item 154
Item 155
Item 156
Item 157
Item 158
Item 159

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>