Alloy nos permite generar un paginador sobre nuestra aplicacion de una manera muy sencilla y rápida. tan solo necesitamos un bloque vacío sobre el que generar el paginador, configurar las opciones del paginador a nuestro gusto y el propio ALLOY nos genera un paginador.
La tarea complicada surge al querer hacer que cada una de las paginas del paginador cargue lo que nosotros queremos, ya sea mostrando y ocultando contenidos, o de una forma más avanzada, cargando los contenidos mediante AJAX. En nuestro caso, vamos a hacer un ejemplo sencillo que consistirá en generar el paginador sobre un bloque vacio y hacer que al darle a cada uno de los numeros nos cargue una pagina diferente simplemente mostrando y ocultando las otras.
Para realizar ésto necesitamos un contenido sobre el que trabajar. Usaremos lo siguiente:
<div class="paginatorA"></div>
<div class="contentA">
<div class="pagina1">Pagina1</div>
<div class="pagina2">Pagina2</div>
<div class="pagina3">Pagina3</div>
<div class="pagina4">Pagina4</div>
<div class="pagina5">Pagina5</div>
<div class="pagina6">Pagina6</div>
<div class="pagina7">Pagina7</div>
</div>
Sobre "paginatorA" generaremos el paginador. Cada una de las paginas "pagina1","pagina2",..., paginaN serán los contenidos que mostraremos y ocultaremos al clicar sobre las diferentes páginas del paginador. Para generar el paginador y programar el mostrar y ocultar los contenidos tenemos el siguiente código:
AUI().ready('aui-paginator', function(A) {
A.all('.contentA div').setStyle('display','none');
var pgA = new A.Paginator({
containers: '.paginatorA',
total: 7,
maxPageLinks: 7,
rowsPerPage: 1,
rowsPerPageOptions: [ 1, 3, 5, 7 ],
on: {
changeRequest: function(event) {
var instance = this;
var newState = event.state;
var page = newState.page;
if (newState.before) {
var lastPage = newState.before.page;
A.one('.contentA .pagina' + lastPage).setStyle('display', 'none');
}
A.one('.contentA .pagina' + page).setStyle('display', 'block');
instance.setState(newState);
}
}
}).render();
});
Como podeis ver, la creación del paginador es muy simple pero la cosa se complica cuando queremos que al clicar sobre las páginas se muestre el contenido correcto. Podeis encontrar toda la información sobre esta funcionalidad de Alloy en la siguiente dirección.
En ella podreis encontrar todas las posibilidades de configuración del paginador, eventos, metodos, etc...
Espero que os sea de utilidad.