Paginator Element won't work for external paging w/ Xano

[brandon]

Im convinced there is something missing in the current documentation that WeWeb provides regarding external pagination because I have followed the documentation exactly as it is laid out, double checked, triple checked, and still no luck.

As you can see below, my collection has all of the needed information returning from Xano:

On my Paginator element, everything is connected to the correct fields:

Total Items:

Items per page:

Offset:

I’ve also got a paginator variable created as instructed:

You can see here that the Paginator element has an “On Change” workflow associated with it:

As instructed, the workflow updates the paginator variable to the “Event” followed by re-fetching the collection from Xano.

And, as you can see, I’ve got the collection inputs bound to the paginator variable as instructed:

page input:

offset input:

So what’s the problem?

This is Page 1 of the results, sorted by lowest price to highest price. As you can see by the screenshot below, the most expensive on this page is $148:

So when I click on Page 2, I expect the first result to be around that $149 price. However, the starting price on Page 2 is actually $199, a nearly $50 price jump:

Here you can see the last number on Page 2 is $250:

But guess what happens on Page 3? It jumps to $328:

So it’s pretty clear that products are being skipped over, which makes sense because for some reason the WeWeb documentation has us sending an “offset” value. So if we are seeing 100 items per page, WeWeb’s documentation is telling me that when a request for page 2 is sent to Xano, we also set the offset value to “100” which will skip over the next 100 items. The problem only grows as the page count gets higher. Page 3’s offset value will be 200!

This means that instead of the 7 page count you see at the beginning (which is accurate), the results actually end on page 4. Only, when you are on page 4, the paginator suddenly shows you are on a page 10, with a max of 21 pages:

And once I click on that “24” page I’m then on page “Infinity” which is clear there is something wrong.

Any solutions to this?

[brandon]

So after messing around I have an 80% solution that totally goes against WeWeb’s documentation. Since the Paginator element is a pre-created element, I’m not 100% how it functions in the background but one thing seems clear to me: The “offset” value is critical for the Paginator element, but not great for accurate Xano results (for 99% of use cases).

So here is what I did:

1. In Xano, I completely ignore the “Offset” value:
   

   

2. I don’t even bother to send the “Offset” value to Xano via the WeWeb Collection settings:
   

3. Since the Paginator still needs an “Offset” value to determine what page to request/display (from my observation), instead of pulling that number from Xano’s response (which no longer exists with this modification) it just runs a simple IF/THEN statement:
   

   

In simple terms, the formula says "IF Xano is showing that we are on the last page of the results THEN return the total item number count as the offset value. OTHERWISE, run a calculation that mimics the same calculation the offset variable was making.

When testing this method, the pagination works great! Even when I get the final page (which in this case is page 7) it actually still shows that we are on page 7! However, when on that final page, suddenly there are more available pages, up to 21 pages in fact. Of course, none of those pages will actually work because as soon as you request a page 8 or higher to Xano, there will be nothing to return.

What is WeWeb doing to artificially create the illusion of more pages once on the final page? Only WeWeb knows…and I hope to find out!

[Joyce]

Hi @brandon

Yeah, apologies for that confusing documentation. A lot has changed on both the Xano and WeWeb side since we wrote it.

A new video tutorial is coming soon. In the meantime, here’s a quick run down on how to set things up.

Xano setup

In Xano decide how many items you want per page, make sure to have either an offset or current page input.

Test API call

In Xano and WeWeb, test your API call to make sure it sends back the data you expect depending on the page or offset you send.

Here we chose to tell Xano which page we want:

Don’t worry about making the call dynamic yet, just try with a few values to make sure it’s sending what you expect.

Paginator variable

In WeWeb, create an object variable with the default value for your page or offset (depending on what you chose to make the call to Xano)

Paginator workflow

On the paginator element, create a workflow on change that updates your paginator variable with the information from the event, then refetches the collection:

That way your paginator variable will have the up to date offset and current page so whatever you chose to make the call to Xano, you’ll have the correct info based on user interactions with the paginator.

Paginator settings

On the paginator element, bind:

• the total items returned by Xano,
• the fixed number of items per page (note: this is NOT the number of items received because if you’re on the last page of the collection, the backend might return only 17 items leftover instead of the full 25 per page for example)
• the offset – the offset should be current page (from the Paginator event) - 1 * number of items per page

I hope that helps!

[brandon]

Woohoo! That fixed it! Thanks so much @Joyce!!!

[Joyce]

You’re welcome! It was one of the most painful tutorials to write and record so I feel you

[Aaron]

I am struggling with this still. For whatever reason, I am still unable to get this updated. The event.context never changes. Could it be where the paginator is on the page? Does it need to be within the container that is bound to the data? Do you have that new video yet?

Thanks

[FJP84]

Can you share some screenshots of both Xano api end point and pagination config on the table query and configuration of the paginator.

In weweb you need to assign total items, items per page and offset, but in xano you need to either use per_page (aka limit) and offset or per_page and page. When you mix both variants it will not work.

[mdodds]

The Back-end Pagination directions found here work well with one key change - don’t pass the Offset as an input to the Xano external sort. The Xano Paging in the API Output configuration takes care of this. Xano probably changed their functionality since the original article was published and you end up with two offsets if you follow the original article.

[Joyce]

Oooh, thanks for spotting this! I’ll look into it and update the article asap!

[Joyce]

Hey there

Just recorded a video on how to setup backend pagination with Xano and our paginator element.

@mdodds, you mentioned previously you didn’t need to pass the offset. I found I still had to but maybe there’s something I’m missing and there’s an easier way to do this. If there is, could you record a short video showing me how?

[mdodds]

@Joyce, here’s a quick video of my setup without passing the offset. I’ve tried it on a few different data sets and it seems to work but please let me know if I’m doing something incorrectly.

[Jay12]

I came across this thread after struggling with the pagination issue.

Not passing the offset turned out to be the right answer!

If I follow documentation on weweb and set up offset that way,it would not work out in xano. If I pass “per page” value to xano, they work like offset in xano