# How do I set pagination for a Collection with JS Formula?

**URL:** <https://community.weweb.io/t/how-do-i-set-pagination-for-a-collection-with-js-formula/251>\
**Category:** How do I?\
**Tags:** filter, static-collections\
**Created:** [February 20, 2022, 8:15am UTC](https://community.weweb.io/t/how-do-i-set-pagination-for-a-collection-with-js-formula/251 "2022-02-20T08:15:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ThomasB](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/thomasb/32/290_2.png) [@ThomasB](https://community.weweb.io/u/ThomasB)\
**Post date:** [February 20, 2022, 8:15am UTC](https://community.weweb.io/t/how-do-i-set-pagination-for-a-collection-with-js-formula/251/1 "2022-02-20T08:15:45Z")

</div>

I am trying to display a collection from Airtable with various search and filter.

One filter I wanted was the ability to filter by one or more “Tags” - These are defined in a second table in my Airtable base and linked in the main table.

That was a first challenge as the NoCode filters did not allow me to do a filter that would be "Where every element of -ArrayVariable- is in the -AirtableTagsArray-. I eventualy managed to to that by changing the Items binding to JS and seting the filter there :

 ![Editor_-_WeWeb ___Blank___ Start_from_scratch](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/f9f6ac06c084ded12c246d49e148657815f8e065.png)

But now, I am adding a pagination to the collection… which seems to be ignored by my JS.

It work if I set back the items binding to formula - So it seems that it’s the JS binding for the Collection Items that causes the pagination to be ignored.

How do I add pagination ?

I’d suppose it can be defined in the JS binding as well, but how ?

---

<div class="post-metadata">

**Author:** ![flo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/flo/32/13260_2.png) [@flo](https://community.weweb.io/u/flo)\
**Post date:** [February 22, 2022, 4:19pm UTC](https://community.weweb.io/t/how-do-i-set-pagination-for-a-collection-with-js-formula/251/2 "2022-02-22T16:19:32Z")

</div>

Hello Thomas,

Congratulations with this JS function! It’s a nice and elegant way to do it.

Let me help you with the Pagination. The paginator element needs a collection to work because it uses collection metadata. You can see all this data when you bind items with the collection tag, or when you return the collection in javascript. If you look closely you will see, **limit** , **total** & **offset** fields. Example:

 ![CleanShot 2022-02-22 at 17.05.05](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/e8dede23e2e49e59e67f43a398187bb93a7120d6.png)

That is what is missing in your return function. You are returning the list but not the metadata the paginator element needs. To fix this, you need to return an object that looks like a collection. An object with these fields:

- data
- limit
- total
- offset

here is how you can do it:

 ![CleanShot 2022-02-22 at 16.54.38](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/4a8d2fde22590d5226e84f057bb1823b4619f7c5.png)  
limit, offset & total can be found in the collection. You just need to return them and it will do the trick. Make sure to have something like this in your Current value:  
 ![CleanShot 2022-02-22 at 16.55.13](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/1X/07a3a6442e389f441fc11b5ab9ee796bd27286fe.png)

Here the code:

```auto
const collection = SELECT_A_COLLECTION_IN_THE_TREE_BELOW
const limit = collection.limit
const offset = collection.offset
const total = collection.total

const filteredData = HERE_YOUR_FILTERED_LIST

const collectionObjectToReturn = {
  data:filteredData,
  limit: limit,
  total: total,
  offset: offset
  }
return collectionObjectToReturn

```

Tell me if that worked for you 😉

---

<div class="post-metadata">

**Author:** ![ThomasB](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/thomasb/32/290_2.png) [@ThomasB](https://community.weweb.io/u/ThomasB)\
**Post date:** [February 22, 2022, 4:55pm UTC](https://community.weweb.io/t/how-do-i-set-pagination-for-a-collection-with-js-formula/251/3 "2022-02-22T16:55:30Z")

</div>

Looks awesome. I’ll try that solution.

But since I am filtering the data, and thus reducing the number of items in the collection, should I change the total accordingly ?

---

<div class="post-metadata">

**Author:** ![flo](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/flo/32/13260_2.png) [@flo](https://community.weweb.io/u/flo)\
**Post date:** [February 22, 2022, 10:31pm UTC](https://community.weweb.io/t/how-do-i-set-pagination-for-a-collection-with-js-formula/251/4 "2022-02-22T22:31:10Z")

</div>

You are absolutely right, you can use filteredData.length. Like this:

```auto
const collection = SELECT_A_COLLECTION_IN_THE_TREE_BELOW
const limit = collection.limit
const offset = collection.offset
const total = collection.total

const filteredData = HERE_YOUR_FILTERED_LIST

const collectionObjectToReturn = {
  data: filteredData,
  limit: limit,
  total: filteredData.length,
  offset: offset
  }
return collectionObjectToReturn

```