Can we have the paginator synced with results of filtered collection

[ayoub]

Hello WeWeb Community,

I’m currently working on a project where I have a collection list that ranges from 100 to 1000 items. The list includes a filter bar with a search input and several option lists. Additionally, I’ve implemented frontend pagination which is synchronized with the paginator to manage the collection.

However, I’ve encountered an issue: when I apply a filter that reduces the list to, say, 50 items, the paginator still displays the number of pages based on the total items, not the filtered items.

I’m looking for a way to adjust the paginator so it correctly reflects the number of pages for the filtered list. Has anyone faced a similar problem or have any suggestions on how to resolve this?

Thank you in advance for your help!

[Joyce]

Hi @ayoub

Have you tried applying the filters at collection level?

[ayoub]

Hello @Joyce
Thank you for you replay
so im using airtable in this project and i just added the filters at collection level, but i think i should add a workflow where whenever a user filters the collection i should re-fetch the data to get it passed by the filter in the collection level

• i found no way to re-fetch the data from workflows, should i create my own api using xano to fetch data from airtable then send it back to weweb ?
• i think this will mess with the performance since the user will re-fetch data whenever he filters the collection
• it will be almost as backend filtering, when we only have 100 - 500 items

thank you for your time and effort

[archenia_jsanchez]

I’m doing backend filtering, but happy to share how I approached this for reference.

@ayoub

i found no way to re-fetch the data from workflows, should i create my own api using xano to fetch data from airtable then send it back to weweb ?

There should be a “fetch collection [in parallel]” action that you can add to your workflow. You’d probably want to tie this to an “apply” button. Then set the filters as variables that you can pass into the collection. I dont see why you couldnt apply the filter to the collection in the front end. Using Joyce’s example, if I search for “Smith” I’d store that value in a variable and map it to the value in that filter query so that it reads “Where name contains [search_variable]”

@ayoub

i think this will mess with the performance since the user will re-fetch data whenever he filters the collection

If you’re max is 1,000 results, I can’t imagine it being that messy with performance. I just think you’d need to rely on a single “apply” action rather than fetching after each key press or something. I have a few drop downs and a toggle that a user can use to filter a table, and even with backend filtering there’s no noticeable issues in performance.

[ayoub]

Hello @archenia_jsanchez
thank you for your replay

the problem is filters are working very well if applied in the collection list element, but the paginations is not working accordingly to the filtered result, @Joyce said that the filters should be applied to on data field on the collection level, so after doing that i should add a workflow to each filter element onChange to fetch data on every user select and i can add a debounce to the search field, but the problem is when i fetch that table from airtable it take something like 5seconds in average, i found it a bite slow for the user to use

should i post a video recording

[ayoub]

@Joyce @archenia_jsanchez
looks faster after changing the api config from dynamic to cached
is this relevant

[Xtian]

Hi,
I have the same problem. And this is how I solve this.

So I have the collection coming from Xano with 50,000 records. Let’s name it collection_1.
Then, I created a proxy collection, but a variable with object type. Let’s call it proxy_collection_1.

On my front end, I created a table, with fields bound to the collection.
Now, to initially populate the table, on page load, I pass the value of the collection_1 to the proxy_collection_1. Make sure to pass the whole collection to the variable, including the total, the offset, etc, and not just the data. Then I use the proxy_collection_1 as the items on my table.

Now for the paginator. I select Custom pagination.
I created a variable number offset.
Click on the paginator, and bind the value of the Offset property to the offset variable.
On the Total items property, bind the proxy_collection_1.total

Now, while still on the paginator, go to the Workflows. Select On change.
Add a Change Variable value action. Select the variable offset. On the value, bind and go to the Actions tab, and select the Event.context.offset.

Add another Change Variable value action. Select the variable proxy_collection_1. Set the Partial Update to On. On the Path, type offset. On the value, bind the offset variable.

Finally, on the search text box’s On Change workflow, I reset the offset variable. I change the variable value of proxy_collection_1 to the collection_1 again. And I add the relevant filters here at the workflow.

Hope this helps!