[fusion_builder_container hundred_percent=”no” equal_height_columns=”no” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” parallax_speed=”0.3″ video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” border_style=”solid” flex_column_spacing=”0px” type=”flex” padding_top=”0″ padding_right=”0″ padding_bottom=”0″ padding_left=”0″][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ background_position=”left top” background_color=”” border_color=”” border_style=”solid” border_position=”all” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” center_content=”no” last=”true” min_height=”” hover_type=”none” link=”” first=”true”][fusion_youtube id=”https://www.youtube.com/watch?v=SO9js0LsGNc” alignment=”center” width=”” height=”” autoplay=”true” mute=”true” api_params=”” title_attribute=”” video_facade=”” margin_top=”” margin_bottom=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” css_id=”” structured_data=”off” video_upload_date=”” video_duration=”” video_title=”” video_desc=”” /][fusion_separator style_type=”none” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” flex_grow=”0″ top_margin=”10px” bottom_margin=”10px” width=”” height=”20″ alignment=”center” border_size=”” weight=”” amount=”” sep_color=”” hue=”” saturation=”” lightness=”” alpha=”” icon=”” icon_size=”” icon_color=”” icon_circle=”” icon_circle_color=”” /][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” title_link=”off” link_url=”” link_target=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” content_align_medium=”” content_align_small=”” content_align=”left” size=”2″ animated_font_size=”” fusion_font_family_title_font=”” fusion_font_variant_title_font=”” font_size=”26px” line_height=”” letter_spacing=”” text_transform=”” text_color=”” hue=”” saturation=”” lightness=”” alpha=”” animated_text_color=”” text_shadow=”no” text_shadow_vertical=”” text_shadow_horizontal=”” text_shadow_blur=”0″ text_shadow_color=”” text_stroke=”no” text_stroke_size=”1″ text_stroke_color=”” text_overflow=”none” margin_top_medium=”” margin_right_medium=”” margin_bottom_medium=”” margin_left_medium=”” margin_top_small=”” margin_right_small=”” margin_bottom_small=”” margin_left_small=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” margin_top_mobile=”” margin_bottom_mobile=”” gradient_font=”no” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ highlight_color=”” style_type=”default” sep_color=”” link_color=”” link_hover_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=””]
Problem
[/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
???? You’ve set the pagination to display 10 items per page.
???? You have the input text fields to add the new records into the repeater.
???? If that newly added item creates a new page, you want to display the newly added item on the new page automatically.
Example:
1. You have a repeater in Axure RP with the pagination to display 10 items per page.
2. You want to add the 11th item and when added, display the 11th item on the top of Page 2 automatically.
[/fusion_text][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” title_link=”off” link_url=”” link_target=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” content_align_medium=”” content_align_small=”” content_align=”left” size=”2″ animated_font_size=”” fusion_font_family_title_font=”” fusion_font_variant_title_font=”” font_size=”26px” line_height=”” letter_spacing=”” text_transform=”” text_color=”” hue=”” saturation=”” lightness=”” alpha=”” animated_text_color=”” text_shadow=”no” text_shadow_vertical=”” text_shadow_horizontal=”” text_shadow_blur=”0″ text_shadow_color=”” text_stroke=”no” text_stroke_size=”1″ text_stroke_color=”” text_overflow=”none” margin_top_medium=”” margin_right_medium=”” margin_bottom_medium=”” margin_left_medium=”” margin_top_small=”” margin_right_small=”” margin_bottom_small=”” margin_left_small=”” margin_top=”” margin_right=”” margin_bottom=”30px” margin_left=”” margin_top_mobile=”” margin_bottom_mobile=”” gradient_font=”no” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ highlight_color=”” style_type=”default” sep_color=”” link_color=”” link_hover_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=””]
Solution
[/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
Assuming the following:
- You’ve added the repeater.
- You’ve the sample data in the repeater.
- You’ve the input boxes and the button to add the item to the repeater.
Step 1: Let’s add a pagination label that displays the pagination information.
[/fusion_text][fusion_button link=”https://www.dropbox.com/scl/fi/l0e2azp1m04bgvcpuc68a/Pagination.rp?rlkey=26ty2f7i1y0ff5yemoc9k1y5m&dl=0″ title=”” target=”_blank” link_attributes=”” alignment_medium=”” alignment_small=”” alignment=”center” modal=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” color=”custom” button_gradient_top_color_hover=”” hue=”” saturation=”” lightness=”” alpha=”” button_gradient_top_color=”#004fae” button_gradient_bottom_color_hover=”” button_gradient_bottom_color=”#004fae” gradient_start_position=”” gradient_end_position=”” gradient_type=”” radial_direction=”” linear_angle=”180″ accent_hover_color=”” accent_color=”” type=”” bevel_color=”” bevel_color_hover=”” border_top=”” border_right=”” border_bottom=”” border_left=”” border_radius_top_left=”” border_radius_top_right=”” border_radius_bottom_right=”” border_radius_bottom_left=”” border_hover_color=”” border_color=”” size=”xlarge” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” fusion_font_family_button_font=”” fusion_font_variant_button_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” stretch=”default” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” icon=”fa-download fas” icon_position=”left” icon_divider=”yes” hover_transition=”text_slide_up” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=””]Download Tutorial File[/fusion_button][fusion_separator style_type=”none” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” flex_grow=”0″ top_margin=”10px” bottom_margin=”10px” width=”” height=”20″ alignment=”center” border_size=”” weight=”” amount=”” sep_color=”” hue=”” saturation=”” lightness=”” alpha=”” icon=”” icon_size=”” icon_color=”” icon_circle=”” icon_circle_color=”” /][fusion_imageframe image_id=”4914|full” aspect_ratio=”” custom_aspect_ratio=”100″ aspect_ratio_position=”” skip_lazy_load=”” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” max_width=”” sticky_max_width=”” align_medium=”none” align_small=”none” align=”none” mask=”” custom_mask=”” mask_size=”” mask_custom_size=”” mask_position=”” mask_custom_position=”” mask_repeat=”” style_type=”” blur=”” stylecolor=”” hue=”” saturation=”” lightness=”” alpha=”” hover_type=”zoomin” magnify_full_img=”” magnify_duration=”120″ scroll_height=”100″ scroll_speed=”1″ margin_top_medium=”” margin_right_medium=”” margin_bottom_medium=”” margin_left_medium=”” margin_top_small=”” margin_right_small=”” margin_bottom_small=”” margin_left_small=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” bordersize=”” bordercolor=”” borderradius=”” z_index=”” caption_style=”off” caption_align_medium=”none” caption_align_small=”none” caption_align=”none” caption_title=”” caption_text=”” caption_title_tag=”2″ fusion_font_family_caption_title_font=”” fusion_font_variant_caption_title_font=”” caption_title_size=”” caption_title_line_height=”” caption_title_letter_spacing=”” caption_title_transform=”” caption_title_color=”” caption_background_color=”” fusion_font_family_caption_text_font=”” fusion_font_variant_caption_text_font=”” caption_text_size=”” caption_text_line_height=”” caption_text_letter_spacing=”” caption_text_transform=”” caption_text_color=”” caption_border_color=”” caption_overlay_color=”” caption_margin_top=”” caption_margin_right=”” caption_margin_bottom=”” caption_margin_left=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″]https://craftsmandu.com/storage/2023/08/Pagination-Label-on-Axure-Repeater-scaled.jpg[/fusion_imageframe][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
Step 2: Add following interaction on click of the Add Record button.
Interaction: CLICK OR TAP.
Action: Add Rows to the repeater (Add the values from Input boxes to the repeater).
Action: Move (Move the Pagination Label we have added in Step 1, by (0,0).
Action: Set Text for the pagination label to (Page [[LVAR1.pageIndex]] of [[LVAR1.pageCount]]).
[/fusion_text][fusion_imageframe image_id=”4915|full” aspect_ratio=”” custom_aspect_ratio=”100″ aspect_ratio_position=”” skip_lazy_load=”” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” max_width=”” sticky_max_width=”” align_medium=”none” align_small=”none” align=”none” mask=”” custom_mask=”” mask_size=”” mask_custom_size=”” mask_position=”” mask_custom_position=”” mask_repeat=”” style_type=”” blur=”” stylecolor=”” hue=”” saturation=”” lightness=”” alpha=”” hover_type=”none” magnify_full_img=”” magnify_duration=”120″ scroll_height=”100″ scroll_speed=”1″ margin_top_medium=”” margin_right_medium=”” margin_bottom_medium=”” margin_left_medium=”” margin_top_small=”” margin_right_small=”” margin_bottom_small=”” margin_left_small=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” bordersize=”” bordercolor=”” borderradius=”” z_index=”” caption_style=”off” caption_align_medium=”none” caption_align_small=”none” caption_align=”none” caption_title=”” caption_text=”” caption_title_tag=”2″ fusion_font_family_caption_title_font=”” fusion_font_variant_caption_title_font=”” caption_title_size=”” caption_title_line_height=”” caption_title_letter_spacing=”” caption_title_transform=”” caption_title_color=”” caption_background_color=”” fusion_font_family_caption_text_font=”” fusion_font_variant_caption_text_font=”” caption_text_size=”” caption_text_line_height=”” caption_text_letter_spacing=”” caption_text_transform=”” caption_text_color=”” caption_border_color=”” caption_overlay_color=”” caption_margin_top=”” caption_margin_right=”” caption_margin_bottom=”” caption_margin_left=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″]https://craftsmandu.com/storage/2023/08/add-data-to-repeater-and-move-label-scaled.jpg[/fusion_imageframe][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
Step 3: When moved, set the current page of the repeater to Page Count
Interaction: MOVED
Action: Set Current Page (Repeater’s current page to Repeater’s Page count.).
[/fusion_text][fusion_imageframe image_id=”4916|full” aspect_ratio=”” custom_aspect_ratio=”100″ aspect_ratio_position=”” skip_lazy_load=”” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” max_width=”” sticky_max_width=”” align_medium=”none” align_small=”none” align=”none” mask=”” custom_mask=”” mask_size=”” mask_custom_size=”” mask_position=”” mask_custom_position=”” mask_repeat=”” style_type=”” blur=”” stylecolor=”” hue=”” saturation=”” lightness=”” alpha=”” hover_type=”none” magnify_full_img=”” magnify_duration=”120″ scroll_height=”100″ scroll_speed=”1″ margin_top_medium=”” margin_right_medium=”” margin_bottom_medium=”” margin_left_medium=”” margin_top_small=”” margin_right_small=”” margin_bottom_small=”” margin_left_small=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” bordersize=”” bordercolor=”” borderradius=”” z_index=”” caption_style=”off” caption_align_medium=”none” caption_align_small=”none” caption_align=”none” caption_title=”” caption_text=”” caption_title_tag=”2″ fusion_font_family_caption_title_font=”” fusion_font_variant_caption_title_font=”” caption_title_size=”” caption_title_line_height=”” caption_title_letter_spacing=”” caption_title_transform=”” caption_title_color=”” caption_background_color=”” fusion_font_family_caption_text_font=”” fusion_font_variant_caption_text_font=”” caption_text_size=”” caption_text_line_height=”” caption_text_letter_spacing=”” caption_text_transform=”” caption_text_color=”” caption_border_color=”” caption_overlay_color=”” caption_margin_top=”” caption_margin_right=”” caption_margin_bottom=”” caption_margin_left=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″]https://craftsmandu.com/storage/2023/08/set-current-page-when-moved-scaled.jpg[/fusion_imageframe][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”” rule_size=”” rule_color=”” hue=”” saturation=”” lightness=”” alpha=”” content_alignment_medium=”” content_alignment_small=”” content_alignment=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” fusion_font_family_text_font=”” fusion_font_variant_text_font=”” font_size=”” line_height=”” letter_spacing=”” text_transform=”” text_color=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” logics=””]
Step 4: Set current page and set the text on Pagination label.
Interaction: PAGE LOADED
Action: Set Current Page (Repeater’s current page to Repeater’s Page count.).
Action: Set Text for the pagination label to (Page [[LVAR1.pageIndex]] of [[LVAR1.pageCount]]).
[/fusion_text][fusion_imageframe image_id=”4916|full” aspect_ratio=”” custom_aspect_ratio=”100″ aspect_ratio_position=”” skip_lazy_load=”” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” sticky_display=”normal,sticky” class=”” id=”” max_width=”” sticky_max_width=”” align_medium=”none” align_small=”none” align=”none” mask=”” custom_mask=”” mask_size=”” mask_custom_size=”” mask_position=”” mask_custom_position=”” mask_repeat=”” style_type=”” blur=”” stylecolor=”” hue=”” saturation=”” lightness=”” alpha=”” hover_type=”none” magnify_full_img=”” magnify_duration=”120″ scroll_height=”100″ scroll_speed=”1″ margin_top_medium=”” margin_right_medium=”” margin_bottom_medium=”” margin_left_medium=”” margin_top_small=”” margin_right_small=”” margin_bottom_small=”” margin_left_small=”” margin_top=”” margin_right=”” margin_bottom=”” margin_left=”” bordersize=”” bordercolor=”” borderradius=”” z_index=”” caption_style=”off” caption_align_medium=”none” caption_align_small=”none” caption_align=”none” caption_title=”” caption_text=”” caption_title_tag=”2″ fusion_font_family_caption_title_font=”” fusion_font_variant_caption_title_font=”” caption_title_size=”” caption_title_line_height=”” caption_title_letter_spacing=”” caption_title_transform=”” caption_title_color=”” caption_background_color=”” fusion_font_family_caption_text_font=”” fusion_font_variant_caption_text_font=”” caption_text_size=”” caption_text_line_height=”” caption_text_letter_spacing=”” caption_text_transform=”” caption_text_color=”” caption_border_color=”” caption_overlay_color=”” caption_margin_top=”” caption_margin_right=”” caption_margin_bottom=”” caption_margin_left=”” animation_type=”” animation_direction=”left” animation_color=”” animation_speed=”0.3″ animation_delay=”0″ animation_offset=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″]https://craftsmandu.com/storage/2023/08/set-current-page-when-moved-scaled.jpg[/fusion_imageframe][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]
Leave a Reply