Ejemplo de paginación

Descripción

En múltitud de páginas tenemos que implementar páginación para mostrar los resultados de una búsqueda, un listado de productos, etc. La forma que más me gusta a mí es hacerlo mediante AJAX para que la interacción con el usuario sea rápida, sin por ello perder el uso no AJAX, como recargar la página y mantener la página actual o compartir el enlace.

A continuación muestro un ejemplo de bloques con únicamente los botones de anterior y siguiente, junto con un mixin (opcional) para mostrar el progreso de la petición.

Demo

Item 80
Item 81
Item 82
Item 83
Item 84
Item 85
Item 86
Item 87
Item 88
Item 89
Item 90
Item 91
Item 92
Item 93
Item 94
Item 95
Item 96
Item 97
Item 98
Item 99

Códigos fuente

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