Para realizar la funcionalidad de mostrar más registros de un conjunto de datos, primero hay que disponer de una tabla o un grupo de elementos que se repiten (el widget que se emplea en Axure es «Repeater»)

En esta primera parte aprenderás a mostrar más filas en una tabla cuando el usuario selecciona el número de registros que quiere visualizar.

En la página donde está el «Repeater» a paginar insertamos un «droplist» cuyas opciones sean por ejemplo 5, 10, 15, y 20. Esto significa que dependiendo de la opción seleccionada se mostrarán 5, 10, 15 o 20 registros.

Una vez que disponemos de estos dos elementos, «Repeater» y «droplist», vamos a programar la visualización de la tabla.

Pasos

• Tenemos que configurar el «Repeater» marcando la opción «Multiple pages» e indicar el número de items o registros por página.

• En las opciones del «droplist» hay que programar el evento «OnClick» para cada una de ellas (para la opción 5, 10, 15 y 20). En todos los casos las funcionalidades a añadir son las mismas.

• Comenzamos indicando que en la «opción5» (nombre asignado a la opción del droplist) los items por página son 5.

• A continuación, hay que mover el «droplist» o «paginación» (si tuviéramos un bloque de paginación) hacia la parte inferior ya que, en función del número de registros, la altura de la tabla crece y, por tanto, el «droplist» o «paginación» deberá de ubicarse siempre al final de la tabla.

Para ello, se utiliza una fórmula compuesta por variables, quedando la función «Move» de la siguiente manera:

Move paginacion to ([[Target.x]],[[tablaRepeater.bottom]])

¿Qué significa esta función?

Primero seleccionamos el evento «Move» y marcamos el widget que se va a mover»droplist» o «paginación».

Para «moverlo» elegimos la opción «to» para que lo haga respecto a la tabla.

En las posiciones X e Y indicamos:

• Para X: que mantenga la posición «x» que tenga. [[Target.x]]
• Para Y: que se mueva siempre a la parte inferior de la tabla. Para eso utilizamos las variables.

Para poder acceder al objeto «repeater» (la tabla) tenemos que ayudarnos de las variables, en este caso locales.

Primero se crea en la parte inferior la variable. Le indicamos un nombre, por ejemplo, «tablaRepeater» y le atribuimos el valor. Es decir, le indicamos que la variable es un widget que se llama «tabla-simple» (el nombre que le hemos proporcionado al «repeater»).

Una vez que ya tenemos la variable, en la parte superior preparamos la «fórmula», en este caso, queremos que nos de el valor que tiene la posición bottom de la tabla o «repeater». Podéis escribirlo o si pulsáis en el enlace «Insert Variable or Function», encontraréis la variable que acabamos de crear.

[[tablaRepeater.bottom]]

Con la fórmula preparada y las dos funciones programadas para la opción «5» hay que realizar lo mismo para las otras opciones.

Una vez que ya estén todas, probamos para comprobar que al realizar la selección de un número de registros, el «droplist» o «paginación» se posiciona siempre en la parte inferior de la tabla.