How do i correctly use the paginator element AND can i use custom elements to achieve the same effect

I have set up a collection from supabse
i have set the pagination to 100 to keep query times lower

BUT i have over 100 records.

i dont see a place to enter a page or offset. am i missing something?

in the network traffic, i so see the offset parameter BUT dont see where to set it in the calls.

there’s nowhere to set the offset in the setup

1 Like

Hi @jaredgibb :wave:

If you’re paginating in the frontend (like it seems you’re doing here), all you have to do is add the Paginator element to your page and bind it to your collection.

If you want to paginate in the backend, you can toggle the “Custom pagination” setting to On and work with the Paginator event to send the offset to Supabase when refetching the collection.

Does that help?

That’s all great, but would it be possible to make offset a feature? :slight_smile: Maybe somebody wants to go fully custom, or just wants to do something else with an offset, other than pagination. Shouldn’t be a biggie to implement it, as it is one field and some code to incorporate it in the requests, but correct me if I’m wrong :slight_smile:

Hi @Broberto :wave:

Not sure what you mean. Can you share one or two use cases that come to mind?

I meant more like, if I wanted to make my own logic for pagination, or maybe do something crazy like, first load the next 50, then load the next 200, then load the next 300. Doesn’t seem like somebody would use it anyway :smiley: But that offset feature wouldn’t hurt imo.

Mmmm I think you could already do that with a button that updates a number variable on click.

Or if you wanted to do something random like that but with the Paginator element, you could do it with “Custom pagination” enabled and bind something crazy to the “Offset” :grinning:

1 Like

Can you tell me more about how this works with a collection from supabase. It’s not like xano where you can simply send a pagination variable.

what you are suggesting only mimics pagination. instead what you are suggesting actually simply increases the limit and brings in more records which only slows down my query. that would be handy if i wanted a ‘see more’ feature but that’s not what i’m going for. instead i want to only get the first 25 records, then the next 25 and so on.

@Joyce hopefully this video can explain better what i am asking here

2 Likes

Ah ok, here’s a short video showing how I’m using the paginator element with a Supabase collection.

Does that approach work for your use case?

1 Like

the answer to Q1 ^^^ thank you @Joyce

the issue was binding to the array and not the object. that’s great!

is there a way to do the same without using the weweb paginator?

wanted to bump this q @Joyce

is there a way to paginate collections without using the weweb paginator element? like, can we build our own and swap it out somehow? i ask as i dont see any variable the collection is tied to. it’s just bound to the element. SO, can we have collection pages, from supabse, bound to some other variable?

I think this should be possible, yes.

First though is you would need to be able to send and receive the info you need to and from your backend like the offset, total number of items, etc.

Here’s an example from Xano:

Not sure what you’d need to do in Supabase to get that info and not just the items from the table though :confused: They have a range parameter that would do the trick but don’t think it works with our current “Advanced mode” because that works with their select parameter.

My second thought, instead of using the Pagination setting that is not satisfactory for your use case because you can’t make it dynamic, you could bind a filter to a pagination variable you would have created to get only the items you want:

What do you think? Could that work for you?

not really as my end user. can sort data different ways so slicing records by id doesnt work.

1 method i tried, was to construct the call using the api connector by copying the call being made in my network traffic by the plugin. and while it wasnt pretty, I was able to paginate by binding the offset parameter of the postgrest call to a variable that i controlled.

In the end, our product team is fine using the built in pagination to keep things moving quicker on the front end. would love to see the ability to override the offset in the collection somehow since it’s just a paramater on the postgrest api call.

1 Like