Paginating Repeaters

In this tutorial, you'll learn how to paginate repeater widgets to separate their items into multiple "pages" on the canvas. You'll also learn how to switch between pages in the repeater via the Set Current Page action as well as how to display the page number and the total page count using the Repeater.pageIndex and Repeater.pageCount properties.

Note

Click here to download the completed RP file for this tutorial.

1. Widget Setup

  1. Open a new RP file and open Page 1 on the canvas.

  2. Drag a rectangle widget onto the canvas, right-click it, and select Create Repeater from the context menu.

  3. Edit the Column1 cells to be numbered from 1-9.

  4. In the Libraries pane, switch to the Icons library and use the search field at the top-left of the pane to search for arrow. Drag a left arrow and a right arrow onto the canvas and place one on each side of the repeater.

2. Paginate the Repeater

  1. Select the repeater and check Multiple pages in the Pagination section at the bottom of the Style pane.

  2. Enter 3 in the Items per page field and leave the starting page as 1.

    This will separate the repeater's nine items into three pages of three items each, and the repeater will load in the web browser displaying the first page of items.

3. Set the Current Page When the Arrow Widgets Are Clicked

  1. Select the right arrow and click New Interaction in the Interactions pane.

  2. Select the Click or Tap event in the list that appears, and then select the Set Current Page action.

  3. Select the repeater widget in the Target dropdown.

  4. Select Next in the Page dropdown and click OK to save the action.

  5. Repeat these steps with the left arrow, setting the repeater's page to Previous.

4. Preview the Interaction

  1. Preview the page in your web browser. You should see the first three items of the repeater displayed.

  2. Click the right arrow to see the next three items, and click it again to see the final three.

  3. Click the left arrow to go backward through the items.

5. Display the Current Page Number and Total Page Count

  1. Back in Axure RP, drag a label widget onto the canvas and place it below the repeater. Set its text to Page 1 of 3.

  2. Select the repeater widget. In the Interactions pane, hover over the Set Text action under the Item Loaded event and click the Add Target button that appears.

  3. Select the label widget in the Target dropdown.

  4. Click the fx icon to the right of the Value field to open the Edit Text dialog.

  5. In the top area of the dialog, highlight the 1 in Page 1 of 3. Then, click Insert Variable or Function and select pageIndex under Repeater/Dataset in the list that appears. The text in the area should now read: Page [[Item.Repeater.pageIndex]] of 3

  6. Highlight the 3 and click Insert Variable or Function again. Select pageCount under Repeater/Dataset. The text in the area should now read: Page [[Item.Repeater.pageIndex]] of [[Item.Repeater.pageCount]]

    The two bracketed expressions will be replaced by the number of the repeater's visible page and its total page count respectively in the web browser. The number of the visible page will automatically update whenever the repeater's page changes.

  7. Click OK to close the Edit Text dialog and then click OK again to save the Set Text action.

6. Preview the Interaction

Preview the page and click the right and left arrows to change the repeater's page. The text on the label widget should update to display the current page's number.

← Filtering RowsAdaptive Views →