Repeater Index & Pagination

Ask the community
,
3

Hey @juozmant

I don’t see any reason why more than 40 items might cause a problem, but regarding your pagination, you should store the current page index in a variable in the page, and when navigating through the - custom - navigation, you need to skip the amount of items based on the selected page, for example, if the page should handle 20 items, and you’re on page 2 , you should skip 20 items, and if you want to display page 5 for example, you’ll need to skip 80 items, here’s how to make it dynamic.

// Inside the page's onReady
let currentPageIndex = 1;
let totalItems = 0;

const page = {
    currentPageIndex: 1,
    items: {
        data: null,
        total: 0,
        multiplier: 0
    },
    check: {
        next: () => {
            if ((currentPageIndex+1) * 20 <= totalItems) {
                return true;
            } else {
                return false
            }
        },
        prev: () => {
            if (currentPageIndex === 1) { return false } else { return true }
        }
    },
    go: (index) => {
        $w('#navBar').disable();
        let skipNum;
        if (typeof index === 'number' && index >= 0) {
            skipNum = index - 1;
        }
        
        return page.getItems(skipNum).catch(err => console.error(err);
    },
    getItems: (pagesToSkip) => {
        let query = wixData.query('col');
        if (pagesToSkip) { query = query.skip(pagesToSkip) }
        
        return query.find().then((x) => {
            $w('#itemsRep').data = x.items;
            page.items.data = x.items;
            page.items.total = x.totalCount;
            page.currentPageIndex++;
            
            updateNav();
            return Promise.resolve();
        }).catch(err => {
            throw err;
        })
    },
    updateNav: () => {
        // Calculating the pages number
        let pagesNum = Math.floor(page.items.total / 20);
        if (page.items.total % 20 > 0) { pagesNum++ }
        $w('#navBar').totalPages = pagesNum;
        
        // Applying the current page
        $w('#navBar').currentpage = page.currentPageIndex;
        
        // Update the multiplier
        if (page.currentPageIndex === 1) {
            page.items.multiplier = 0;
        } else {
            page.items.multiplier = (page.currentPageIndex -1) * 20;
        }
        
        // Enable the navigation (pagination) bar
        $w('#navBar').enable();
    }
}

Prepare the repeater to detect the right index:

$w('#itemsRep').onItemReady(($item, data, index) => {    
    $item('#index').text = String(page.items.multiplier + index +1);
})

Initializing the page

page.go(); // This will skip 0 items and will load the first 20 items;

And that’s it, hope this helps!~
Ahmad