Pagination bar for a repeater

Ask the community
,
1

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

2

Hi Arturo,

If you’re still working on this, this page: Working with the Connect Repeater Panel | Help Center | Wix.com should give you most of what you need.

3

Thank you Justin. I’ll review this information

4

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

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

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

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()

        })
    }

}
2 Likes