Question on back-end pagination workflow (missing piece)

Ask us anything How do I?
1

I have a page of items from a collection that I have back end paginated in Xano to show 12 at a time using the newly released tutorial: Pagination: why, when, where, and how? - YouTube

I have the object “paginator” variable all set up and the paginator works fine.

However, I am facing an issue that I need help with. I have 2 pages (A & B) where I have binded this same back-end paginated collection.

Page A looks like that:

image
image1920×1489 161 KB

Users can filter and search and then click the item that they want to know more about. There is a paginator here. From there, they will change page. Upon clicking on “Edit”, the selectedVar is changed to contain the item details to pass to the next page.

Page B looks like that:

image
image1920×1097 84.6 KB

Basically it’s an editor and I have binded the exact same collection with paginator set up as per the video instructions. The information on the right shows up fine, it is basically displaying the info from the selectedVar. The problem is on the left.

Page B’s paginator settings are basically following the video tutorial:

image
image1520×758 71.4 KB

The PROBLEM: When I click on an item in page A, IF this item happens to be on page 2 onwards of B, the paginator in page B defaults to page 1 instead of 2/3/4 etc.

SOLUTION NEEDED: How do I get it to NOT show page 1 when I change page to B, but the page that the selected item is showing?

I think I need some sort of workflow but I am NOT sure exactly what.

In a previous thread (same issue), it was suggested for me to find the index and which page the selected item is on, however, I do not know how to find this information, and when I do have that information, how do I pass it on to page B’s paginator?

Many thanks!

2

Oooh that’s a tough one :thinking:

Since you’re using Xano, have you tried making the API call with the offset input instead of the page.

The offset is the index of the first item you want to display. I think that simple change might do the trick with the paginator element recognizing automatically what page that item is on but I’m not sure.

I’d need to recreate the exact same use case to test things but it’d take me a while :worried:

Could you give it a try and let me know?

3

Hey @Joyce! So I have tried that, I am currently doing that actually!

image
image2324×1164 313 KB

The problem is that when I go from page A to page B, when I click on an item on page A, I am unable to find the index of what it is on page B (I only have the ID of the item, and using findindexbykey does not work as I am finding the index of the item on A and not B - though I may be wrong about this), and as a result, I can’t find the offset # to send to Xano.

4

Ah ok.

If you don’t mind sharing your work in public, sounds like a great use case to work on with @flo and @Quentin during Office Hours.

5

Hey Joyce! So just an update, I managed to find a simple workaround actually suggested by Xano’s support - and the solution I found which I’m posting here in case anyone in the future needs is to put the selected item right at the top at page B, then remove the selected item from the collection in page B. This ensures that the selected item is always there when I change page.

The only other alternative is to loop through the thing back-end to find which page the selected item is on which is not efficient so this works :slight_smile:

1 Like
6

Awesome! Glad you found a solution and thanks for taking the time to share it with the community. Really appreciate it :hugs: