Hi! I have a collection, “templates”, paginated in the front end 16 at a time.
Now, I have an “template library” page showing this “template collection” that is paginated 16 at a time where users can pick any asset they want and then edit them in the “template editor”.
Upon clicking on edit, the “selected_template” variable changes to the selected template, and we change page to the editor that also shows the same collection.
Problem is that if the template is on page 2 of the editor for example, the paginator is still showing the templates in page 1, even though the selected template is in page 2.
How do I get the paginator to auto go to page 2, where the selected template actually is?
To do what you want, you will need to activate the custom pagination of the paginator element.
Then you create a variable current page with the type number and default value 0
On page load, you need to create a workflow to get the index of your template in your list. If this index is superior to the number of item you display per page. You need to calculate on which page your element will be. And assign this value to your variable current page
On your paginator element, you will have the total item bind to the total item of your list. For Item per page, a value defines by yourself. And offset bind to (current page - 1)*item per page. Your paginator will be dynamic and display the good template
I’m trying to do this and got everything done except for this part: “You need to calculate on which page your element will be”.
I have the index, how do I find the page number it will be on? For example, index is 1, and there are 5 items on each page. How do I find the page number?
I tried (index / # of items on each page) + 1, but that does not work for index 1 and some others.
For me, the hardest part when recording the tutorial was:
understanding that my backend only needed the page or offset information (not both. not sure why because I could have sworn it needed both before but hey, I got it to work so I’m happy! )
remembering to bind my container to an array of items (i.e. not the entire collection object)
What helped me a lot is testing the API calls in my backend and with “hard-coded” info in WeWeb before making the call dynamic by binding it to a paginator variable.
I’m using front-end pagination here for this particular collection, which I guess is not what the video is focused on? So, I have the entire collection in Weweb already. Still not sure how to do it — Mael’s solution is an option I guess but how do I determine which page it is on from the index?
Basically when I click an item in a collection list on page A, (saving the selected item data to a selected variable), and then I change page to page B with the same collection list binded (but now the item may be on a different page from the page number in page A due to filters and sorting in page A). But when I am on this new page B, the paginator defaults to page 1 rather than the actual page that this item is on. How do I get the paginator to show the correct page that this item is actually on in this new page B?
Unrelated question since we are talking on back end pagination: What about filtering? Must I create a separate collection for each filtered critieria? Since Xano is only returning page 1, but I want to filter on the entire collection.
)