Repeater Index & Pagination

Ask the community
,
1

Hi everyone,

I am using this code for getting Index for repeater item:

$item('#index').text = Number(index+1).toLocaleString();

The problem is i have set 40items per page, i have total of 80. If i go to next page index again starts from 1 to 40. What i need to keep the index(rank) from 1 to 80 for every repeater item.

I could use 80 filtered item at once, but then i am having other problems. For each repeater item i have function onClick which opens $item data. When i close lightbox i can no more click on items, i need to refresh page instead. Keeping only 40 items in repeater solves this problem and lightbox functions like it should.

Thank for help!

@Ahmad

2

@ahmadnasriya maybe you have any ideas? I am really urgent on that… :confused:

Thanks

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

4

@ Ahmad Here is a 2 videos how more than 40items causes the problem:

Any ideas what can cause this?

The code i am using to open lightbox is:

item('#profileimg').onClick(() => {
    $w('#profileimg').hide();
    $w('#loadingGIF').show();
        wixWindow.openLightbox('LivewellProfile', data._id)
.then(() => { 
    $w('#loadingGIF').hide();
    $w('#profileimg').show();
});
 })

In the lightbox code:

$w.onReady(() => {
 let id = wixWindow.lightbox.getContext();
    $w('#datasetPersonal').setFilter(wixData.filter().eq('_id', id)).then(() => {
 })

I will have to delete these videos so maybe you can give your thoughts quickly :slight_smile:

Thanks

5

Not sure what’s the problem here, I need to visit the page and inspect it by myself.

6

@ahmadnasriya any way we could do that? some email that i can send you access?

7

Visit my profile, my contact details are there.