Footer/Pagination below Repeater

Afternoon all,

I’ve created a repeater that will be used to apply filters to - The height of this repeater is going to vary from user to user.

I want to add pagination and also the footer at the end of the repeater - Is there any easy way to lock the pagination/footer at the end of the repeater so when it grows/shortens in size the pagination/footer will always just be below the filtered results?

Thanks in advance.

Cheers

Jase

Yes, there is but it’s a little tricky. I’ve tried it and I think the way to do it is let the page load; apply your filters; wait a fraction of a second; THEN hide (with pull) and show (with push) the repeater. You should end up with a footer that stays close (or as close as it was designed) to the bottom of the repeater.

Oh, also, when paginating, do the hide/show thing too. It won’t actually be needed until you navigate to/from the last page when that page doesn’t have the full amount of items - so you’ll want the footer to move up/down in those cases.

Try that and see if it works for you.

2 Likes

Thanks for replying James. I’ve tried that and it bounces the footer up, but back down to it’s original position - Do you have any examples I could double check the logic?

Cheers

Jase

Here are two ways of doing it. The first is the hide show repeater wrapped in a DP. It’s whacky and doesn’t work 100% of the time.

The second way is the more accurate way of doing it. It calculates the height of the repeater item and the number present in the repeater, then moves the footer accordingly up or down. There is a hidden widget in there bellow the ADD button where the footer movement logic is bound to its onMove event. That way you can just call move on that widget by 0,0 and it will automatically move the footer to the right position. You can add/subtract 1 or multiple items, filter, and this will also work onkeyup if you want real-time movement. You can also throw an animation on the footer movement, but the repeater won’t animate.

Click on an item to remove it. Delete 5 actually deletes anything with a value < 5 so it only works once. It doesnt matter for your purposes, just a heads up.
push pull repeater.rp (75 KB)

2 Likes

It turned out if I generated all the HTML files again it worked, rather than just generating the current page. I’ve gone down the push/pull method for now.

Thanks so much for your input and help.

Cheers

Jase

Wondering if you have an example? I tried to do this, putting the repeater in a dynamic panel, and doing the toggle but it isn’t working.

Hi chelvan,

Looks like matei1987’s example file (“push pull repeater.rp”) contains the Repeater in a Dynamic Panel example. Is that not working for you?

Yes this works fine. In the example, the number of rows is set at 5. However, I have a situation where I don’t know the number of rows since it depends on the filter query. One thing I was thinking of is if Axure is able to count the number of rows the filter is applied to. For example, if the query yields 20 items, then I could calculate the distance?

Hi chelvan,

“[[LVAR1.visibleItemCount]]” (where LVAR1 is the Repeater) displays the amount of items in the repeater that are currently visible after a filter has been applied. Would this be applicable for your project?

Hi Jane

I will send over a file to give an idea since the proposed functionality is a bit different now.

On your repeater widget add

[[LVAR1.top+LVAR1.height+10]]

to the OnItemLoad event, where LVAR1 is the repeater (I found “This.height” didn’t work well)

Then just “Move” your footer using the calculation above as an action in your OnItemLoad.

Be sure to remove the value from the x: to ensure the footer doesn’t move sideways on the page only up and down.

How about something like this?

Repeater_Footer.rp (85.5 KB)

The content of the repeater is a Dynamic Panel. No Push/Pull or Moves by X pixels are required. It simply looks for IsLast then changes the DP State accordingly.

I threw in an +Add Row button to show that it works. I also hooked up a Row Selection function that turns the +Add Row button into a Delete button. I never know when to stop! The footer ALWAYS sticks to the bottom.

Thanks for the fun 7 minute project!

Enjoy.

Hi @jlhelmers, Ive used your rp which is exactly what I was looking for. I have added some fields to be passed to the repeater. The problem is there is a delay and the data is only shown on the second click. What am I missing?

Repeater_Footer.rp (61.3 KB)