© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

REPEATER PAGINATION

STEP 1: PAGINATE THE REPEATER

In the repeater training document, open the page named "Pagination". On the canvas is a three-by-three repeater displaying a selection of books, and a group of widgets that we'll be using to set the repeater's current page, display the current page number, and display the total number of pages.


Select the "Books" repeater widget and open the Style tab of the Inspector. Scroll down to the "Pagination" section and check the box for "Multiple pages". Set the "Items per page" field to "3", and leave the "Starting page" field at "1". This will separate the repeater's nine items into pages of three items each, and the repeater will load in the web browser displaying the first page of items.

STEP 7: SHOW BOTH ARROWS ON ALL OTHER PAGES

We want both arrow icons to show on all pages other than the first and last, so let's add a Show action to the repeater's first OnItemLoad case. Unlike the cases we set up in the last step, this case has no conditions and thus serves as our typical/default case.


With the "Books" repeater widget still selected, double-click "Case 1" under "OnItemLoad" in the Properties tab of the Inspector to edit the existing case.


In the Case Editor, choose the "Show" action under "Show/Hide". Under "Configure actions", check both arrow widgets in the "Pagination Controls" group. Then, click "OK" to close the Case Editor.

MORE RESOURCES

 

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

STEP 2: SET CURRENT PAGE WITH ARROW ICONS

Select the "Next Page Arrow" shape widget (the right arrow icon) by clicking it twice on the canvas: one click to select the "Pagination Controls" group and a second to select the shape itself. (Alternatively, you can select the shape directly in the Outline pane.) Then, double-click "OnClick" in the Properties tab of the Inspector to give it a new OnClick case.


In the Case Editor, choose the "Set Current Page" action under "Repeaters". Under "Configure actions", check the "Books" repeater widget.


At the bottom of the right column, select "Next" in the dropdown. This will set the repeater's visible page to its next available page.


Click "OK" to close the Case Editor.

STEP 3: PREVIEW

Preview the page in your web browser and click the right arrow icon to view the repeater's other two pages. Then, click the left arrow icon to move back to the first page.

STEP 5: PREVIEW

Preview the page in your web browser. The text between the arrow icons should read "Page 1/3". Click the arrows to move back and forth between the repeater's three pages. As you do so, the current page number should update.

Back in the Case Editor, choose the "Hide" action under "Show/Hide". Under "Configure actions", check the "Previous Page Arrow" shape widget.


Click "OK" to close the Case Editor. Notice that in the Properties tab, the new case's condition begins with "Else If". We want this case's condition to be evaluated independently of the first case, so right-click it and select "Toggle IF/ELSE IF" in the context menu. The case's condition should now begin with "If".


Repeat this step to give the "Books" repeater a third OnItemLoad case. Use the condition "if "[[Item.Repeater.pageIndex]]" equals "[[Item.Repeater.pageCount]]"", which will evaluate to "true" when the repeater's last page is displayed, i.e., when the page number matches the total number of pages (3/3). In this case, hide the "Next Page Arrow" shape widget.

Paginate repeater widgets to separate items into multiple pages on the canvas. Switch pages in the repeater via the Set Current Page action. Display the page number and the total page count using the [[Repeater.pageIndex]] and [[Repeater.pageCount]] values.


If you aren't yet familiar with the repeater widget, you can read about its functionality and uses in our Repeater Widgets reference guide. You can also get started with our Repeater Basics tutorials.

STEP 0: DOWNLOAD THE REPEATER TRAINING FILE

If you don't already have it, download AxureRepeaterTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials in the Axure repeater training module.

Repeat this step with the "Previous Page Arrow" shape widget (the left arrow icon), selecting "Previous" in the dropdown instead.

STEP 4: DISPLAY CURRENT PAGE NUMBER AND TOTAL PAGE COUNT

Back in Axure RP, select the "Books" repeater widget. In the Properties tab of the Inspector, double-click "Case 1" under "OnItemLoad" to edit the existing case.


In the Case Editor, choose the "Set Text" action. Under "Configure actions", check the "Page Number" rectangle widget in the "Pagination Controls" group. Then, at the bottom of the right column, click the "fx" button next to the text field to open the Edit Text dialog.


Notice that the top field of the dialog is prefilled with the rectangle's existing text: "Page #/#". This is the format we want the page number information to be displayed in—current page/total pages—so we just need to replace the "#" signs with the appropriate values.

 

Highlight the first "#" sign and click "Insert Variable or Function". In the menu that appears, click "pageIndex" at the bottom of the "Repeater / Dataset" section. Notice that the "#" is replaced with "[[Item.Repeater.pageIndex]]". This value represents the number of the currently visible repeater page.


Now, highlight the other "#" sign and click "Insert Variable or Function" again. In the menu that appears, click "pageCount" at the bottom of the "Repeater / Dataset" section. Notice that the "#" is replaced with "[[Item.Repeater.pageCount]]". This value represents the total number of pages in the repeater.


Altogether, the text in the top field of the Edit Text dialog should read "Page [[Item.Repeater.pageIndex]]/[[Item.Repeater.pageCount]]".


Click "OK" to close the Edit Text dialog, and then click "OK" again to close the Case Editor.

STEP 6: HIDE "PREVIOUS" ARROW ON FIRST PAGE AND "NEXT" ARROW ON LAST PAGE

Since repeater pages don't wrap from last to first, let's hide the arrow icons on the pages where they're nonfunctional. You can't go any farther back than the first page, so we'll hide the "Previous Page Arrow" widget on the first repeater page. Likewise, you can't go any farther forward than the last page, so we'll hide the "Next Page Arrow" widget on the last repeater page.


Back in Axure RP, select the "Books" repeater widget and double-click "OnItemLoad" in the Properties tab of the Inspector to give it a second OnItemLoad case.


At the top of the Case Editor, click the "Add Condition" button to open the Condition Builder.


In the Condition Builder, change the first dropdown to "value". This will replace the second dropdown with a text field; click the "fx" button to the right of this text field to bring up the Edit Text dialog.


At the top of the dialog, click "Insert Variable or Function". In the menu that appears, click "pageIndex" under "Repeater / Dataset". Notice that "[[Item.Repeater.pageIndex]]" appears in the top field of the Edit Text dialog. Then, click "OK" to close the dialog.


Back in the Condition Builder, enter "1" (without quotes) in the field at the far right so that the condition description reads "if "[[Item.Repeater.pageIndex]]" equals "1"". This condition will evaluate to "true" when the repeater's first page is displayed.


Click "OK" to close the Condition Builder.

 

STEP 8: PREVIEW

Preview the page in your web browser and notice that the left arrow icon is not showing. Click the right arrow icon to view the repeater's second page, and notice that the left arrow appears. Then, click the right arrow icon again to view the repeater's last page. Notice that the right arrow icon is hidden.