Pagination

How to create Pagination in AXURE

Step - 1 -  First create Repeater.

- From Libraries Place Repeater in Canvas, Name the Repeater ,  In Properties Tab scroll down and check Repeater , Add Column and Row and Create table with all filled up cell

Step - 2 - Double click on Repeater cell, it will open in new tab

Step - 3 - Name the cell / box and create more cell / box as per created table (header) Data like 

here ID, Name, Description, Image, Price.

Step - 4 - Place the Box and arrange all cell / boxes over the Box / Placeholder

Step - 5 - Select the Repeater and using  Style tab make it interactive, Like here removed border from the cell / boxes. 

Step - 6 - Select the Repeater -> In Properties tab click on case 1 to Edit.

In Case Editor -> Click to add actions -> Widgets -> Set Text 

Configure actions -> Checked Name , and below Set text -> Value and click on "fx"

here set text to Price, Name, description, Id already done

Step - 7 - Click Insert variable or Function -> In Dropdown -> Select -> Item.Name

Repeat the same step for Price -> Item.Price, and description so on.

Step - 8 - For Set the image 

Click to add actions -> Widgets -> Set Image 

Configure actions -> checked - set image

Default -> Value and click on "fx"

Step - 9 - here also same select Item.Image

Step - 10 - Now all table data is loaded in Repeater except Image, First arrange the box size because description text is overflow

Step - 11 - Increase the box size as well as using Style tab make border : none as well as click on box which is as per given name like Id, Name . and select the box and click on font Bold and can change the font size, color and alignment.

Step -12 - Now add shadow using the same Style Tab.

Step - 13 - Now Place the image -> select the Repeater, in Properties tab Repeater Table -> Right click on Image cell and import image.

Here the image size will be same as per given in repeater.

Step - 14 - Now Images are loaded, Start working on Pagination element. pagination need Next , Previous Icon as well as label for Page count as well as total page count.

Place Next , Previous arrow Icon and Label .

Step - 15 - For adding case to Next and Previous arrow

Select Previous arrow icon and in Properties tab click on "OnClick" and add case in Case

 Editor, In Click to add actions -> Repeaters -> Set Current Page 

Configure actions -> Checked to Repeater, bottom -> Select the Page -> Previous and OK

Do same for Next Arrow Icon Here In  Select the Page -> Next and OK

Step - 16 - Adding Page Cont -

- Select the Repeater and click on Case 1 to Edit - In Click to add actions -> Widgets -> Set Text

- Configure actions -> Checked Page No label, In bottom click "fx"

Step -17 - In Edit Text window -> Click on Insert variable or Function -> Select Page Index and Select Page count.

Step - 18 - Now arrange as per page no Label format, like Page index / Page Count and click OK

Step - 19 - Now Preview 

Thanks.