# Pagination bar for a repeater

**URL:** <https://forum.wixstudio.com/t/pagination-bar-for-a-repeater/13342>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [November 29, 2018, 4:41pm UTC](https://forum.wixstudio.com/t/pagination-bar-for-a-repeater/13342 "2018-11-29T16:41:40Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![avillarg](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/avillarg/32/6400_2.png) [@avillarg](https://forum.wixstudio.com/u/avillarg)\
**Post date:** [November 29, 2018, 4:41pm UTC](https://forum.wixstudio.com/t/pagination-bar-for-a-repeater/13342/1 "2018-11-29T16:41:40Z")

</div>

I need to paginate a repeater with a pagination bar. Is exactly the description existing under “Pagination” in the Wix code reference page: : “you have a repeater connected to a dataset and that dataset is set to have a page size of 5. When the page loads, the repeater shows the first 5 items from the dataset. If a user clicks on the next page button of a pagination bar connected to the same dataset as the repeater, the repeater then shows items 6-10 from the dataset.”

I’m new in WIX Code, so I don’t understand some points:

1. The repeater must be connected with dataset via code? How can I do this?
2. How I “link” the Pagination Bar with the recordset? When I put the Pagination Bar in the page and I connect it to the database only show 1 record (not the 200 records that the database has).
3. How I “link” the Pagination Bar with the repeater?

I haven’t found an answer in the forum.  
Can I have help from any of you?  
Thank you,  
Arturo

---

<div class="post-metadata">

**Author:** ![beyondobediencetrain](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/beyondobediencetrain/32/9248_2.png) [@beyondobediencetrain](https://forum.wixstudio.com/u/beyondobediencetrain)\
**Post date:** [February 19, 2019, 6:07am UTC](https://forum.wixstudio.com/t/pagination-bar-for-a-repeater/13342/2 "2019-02-19T06:07:39Z")

</div>

Hi Arturo,

If you’re still working on this, this page: [Working with the Connect Repeater Panel | Help Center | Wix.com](https://support.wix.com/en/article/working-with-the-connect-repeater-panel) should give you most of what you need.

---

<div class="post-metadata">

**Author:** ![avillarg](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/avillarg/32/6400_2.png) [@avillarg](https://forum.wixstudio.com/u/avillarg)\
**Post date:** [February 19, 2019, 1:43pm UTC](https://forum.wixstudio.com/t/pagination-bar-for-a-repeater/13342/3 "2019-02-19T13:43:32Z")

</div>

Thank you Justin. I’ll review this information

---

<div class="post-metadata">

**Author:** ![contacto96375](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/contacto96375/32/26296_2.png) [@contacto96375](https://forum.wixstudio.com/u/contacto96375)\
**Post date:** [July 3, 2023, 3:08pm UTC](https://forum.wixstudio.com/t/pagination-bar-for-a-repeater/13342/4 "2023-07-03T15:08:56Z")

</div>

This is the code that I used:

Data = array of objects  
Item = the pagination bar code  
repeater =the repeater code  
number = the maximum items that are visible  
ordenarPor = sort the array of objetcs

```javascript
let cargas = await wixData.query("anycollection").find().then((r)=>{ return r.items})

page(cargas, $w('#pageResRep'), $w('#resRepresentante'), 5, "periodo")

```

```javascript
export function page(data, item, repeater, number, ordenarPor) {

    repeater.hide()

    repeater.data = []

    let currentData = data

    currentData.sort(function (a, b) {
        if (typeof a[ordenarPor] === 'string') {
            return a[ordenarPor].localeCompare(b[ordenarPor]);
        } else if (typeof a[ordenarPor] === 'number') {
            return a[ordenarPor] - b[ordenarPor];
        } else {
            return 0;
        }
    });

    repeater.data = currentData.slice(0, number)

    let totalBase = currentData.length

    if (totalBase <= number) {

        repeater.data = currentData
        item.hide()
        repeater.show()

    } else {

        item.show()
        item.totalPages = Math.ceil(totalBase / number)

        item.currentPage = 1

        item.onChange(() => {

            repeater.data = []

            let current = item.currentPage

            var a
            if (current === 1) { a = 0 } else { a = (current * number) / (1) - number }
            let b = a + number

            let showData = currentData.slice(a, b)

            repeater.data = showData
            repeater.show()

        })
    }

}

```