# Can we have the paginator synced with results of filtered collection

**URL:** <https://community.weweb.io/t/can-we-have-the-paginator-synced-with-results-of-filtered-collection/8933>\
**Category:** How do I?\
**Tags:** binding, design, filter\
**Created:** [June 3, 2024, 1:48pm UTC](https://community.weweb.io/t/can-we-have-the-paginator-synced-with-results-of-filtered-collection/8933 "2024-06-03T13:48:38Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ayoub](https://avatars.discourse-cdn.com/v4/letter/a/c89c15/32.png) [@ayoub](https://community.weweb.io/u/ayoub)\
**Post date:** [June 3, 2024, 1:48pm UTC](https://community.weweb.io/t/can-we-have-the-paginator-synced-with-results-of-filtered-collection/8933/1 "2024-06-03T13:48:38Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [June 4, 2024, 3:43pm UTC](https://community.weweb.io/t/can-we-have-the-paginator-synced-with-results-of-filtered-collection/8933/2 "2024-06-04T15:43:47Z")

</div>

Hi @ayoub 👋

Have you tried applying the filters at collection level?

 ![CleanShot 2024-06-04 at 17.41.56@2x](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/b4f59438f901fa0b14eece40fc5cc816e574d00c.png)

---

<div class="post-metadata">

**Author:** ![ayoub](https://avatars.discourse-cdn.com/v4/letter/a/c89c15/32.png) [@ayoub](https://community.weweb.io/u/ayoub)\
**Post date:** [June 4, 2024, 5:38pm UTC](https://community.weweb.io/t/can-we-have-the-paginator-synced-with-results-of-filtered-collection/8933/3 "2024-06-04T17:38:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![archenia\_jsanchez](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/archenia_jsanchez/32/8656_2.png) [@archenia\_jsanchez](https://community.weweb.io/u/archenia_jsanchez)\
**Post date:** [June 4, 2024, 6:57pm UTC](https://community.weweb.io/t/can-we-have-the-paginator-synced-with-results-of-filtered-collection/8933/4 "2024-06-04T18:57:18Z")

</div>

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]”  
 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/1c98d3478fffe9e42624075c0ef828402c595b8a.png)

> [@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.

---

<div class="post-metadata">

**Author:** ![ayoub](https://avatars.discourse-cdn.com/v4/letter/a/c89c15/32.png) [@ayoub](https://community.weweb.io/u/ayoub)\
**Post date:** [June 4, 2024, 7:41pm UTC](https://community.weweb.io/t/can-we-have-the-paginator-synced-with-results-of-filtered-collection/8933/5 "2024-06-04T19:41:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ayoub](https://avatars.discourse-cdn.com/v4/letter/a/c89c15/32.png) [@ayoub](https://community.weweb.io/u/ayoub)\
**Post date:** [June 4, 2024, 8:26pm UTC](https://community.weweb.io/t/can-we-have-the-paginator-synced-with-results-of-filtered-collection/8933/6 "2024-06-04T20:26:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Xtian](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/xtian/32/4402_2.png) [@Xtian](https://community.weweb.io/u/Xtian)\
**Post date:** [June 18, 2024, 8:35am UTC](https://community.weweb.io/t/can-we-have-the-paginator-synced-with-results-of-filtered-collection/8933/7 "2024-06-18T08:35:06Z")

</div>

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`.

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/607c523457e91a4e3c9b7b00349040807d3d53b4.png)

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!
