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

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>