Request: Adding and Setting Up a Pagination Bar

Ask the community
1

We need pagination bar for dynamic pages to navigate between pages of items in the collections.

At the moment it is only possible to add the ‘‘Load More’’ button.

2

This specific pagination function works with buttons, their text (aka label), and their enabled/disabled status (for design purposes).
And lists the pages as numbers by changing their label. ie: 1 2 3 4 5 …

To use it, you’ll need to create a repeater, place a button inside the repeater item, and design to your liking.

Then, you will need to make sure the #ID of your repeater and buttons start with the same word, and continue to another that starts with a capital letter, while the button name ends with the word: Count.
IE: #buttonRepeater , for the repeater. #buttonCount , for the button.

Then inside your $w.onReady() function, create a Dataset.onReady() function (this will make sure it happens when the dataset has finished loading).
And trigger the pagination function while supplying which dataset to read from, and the repeater name (that holds the buttons) to apply on.

For example:

$w.onReady(function () {
    $w('#myDataSet').onReady( () => {
        pagination($w('#myDataSet'), $w('#buttonRepeater'))
    });
});

Function:


export function pagination(dataset, repeater) {
    let count = dataset.getTotalPageCount();
    let button = `#${repeater.id.match(/[a-z]+/gm)[0]}Count`;
    let repData = [];
    let repObj = {};
    for (let i = 0; i < count; i++) {
        repObj._id = i.toString();
        repObj.label = i + 1;
        repData.push({...repObj});
    }
    repeater.data = repData;
    repeater.onItemReady( ($item, itemData, index) => {
        repeater.forItems( ["0"], ($item) => { $item(button).disable() });
        $item(button).label = itemData.label.toString();
        $item(button).onClick(async () => {
            let previous = dataset.getCurrentPageIndex() - 1;
            await dataset.loadPage(index+1);
            repeater.forItems( [previous.toString()], ($item) => { $item(button).enable() });
            $item(button).disable();
        });
    });
}

3

Thanks for sharing your way with how to accomplish this with code.