How to set PAGINATION for repeater items in Editor X

Ask the community
,
2

Hello,

The pagination element is not yet available in editor X. However, you might be able to create your own with code.

You might be able to add buttons for the pagination menu and then set the number of items you want to display with the dataset.setPageSize API. Read more about it here .

Each button will need an onClick event and within the onClick you can use the nextPage() function to move onto the next page of items.

There may be a few other APIs that may be useful to you here .

I also located another similar forum post you find helpful:
https://www.wix.com/corvid/forum/community-discussion/dynamic-paging-control

I hope this helps!

Best regards,

3

Thanks! Miguel for replying But can you send me code for that because I don’t know much about coding.

4

For anyone who is in the same position as Saurabh Singh, here’s a coded solution:

Please note:

Following on from Miguel’s excellent response:

To add pagination to your dataset, add 2 button elements to your page and name them “Next page” and “Previous page”.

Then, copy this code into the code editor of your page ( please note that the ID of your dataset and function names for the click events may be different than what I have used - use the “Properties & Events” tab to find yours):

$w.onReady(function () {
    //sets the dataset's page size
    $w('#dataset1').setPageSize(4); //change this value to display more items
});
//moves to the next page of data
export function button1_click(event) {
    $w('#dataset1').nextPage();
}
//moves to the previous page of data
export function button2_click(event) {
    $w('#dataset1').previousPage();
}

I hope you find this useful :slight_smile:

5

There is still no pagination bar in Editor X? Geez!!! The more things I find out are missing. It’s like getting a Tony Stark mansion with no doors, windows, or a driveway… but there is a helicopter pad!

5 Likes
6

Hi guys,
I finally got how to do this:

let currentProduct = ""; 
let currentPageQuery = null; 

$w.onReady(function () {	
	setupRepeaterDetail("earring")
});

export async function checkCurrentTotal(item) {

	const nextBtn = $w(`#${item}NextButton`)
	const prevBtn = $w(`#${item}PrevButton`)
	let total = Number($w(`#${item}TotalPage`).text)
	let current = Number($w(`#${item}CurrentPage`).text)

	console.log("1-Total Pages:", total, "1-Current Page:", current);

	current === 1 ? prevBtn.disable() : prevBtn.enable()
	total === current ? nextBtn.disable() : nextBtn.enable()
}

export async function upDateNextBtn(item) {

	const btn = $w(`#${item}NextButton`)

	btn.onClick(() => {

		if (currentPageQuery && currentPageQuery.hasNext()) {
			currentPageQuery.next().then(newResults => {
				console.log("New Results", newResults);
				currentPageQuery = newResults; 
				setupRepeaterWithData(currentProduct, newResults.items); 
				updatePageControls(item, newResults); 
				checkCurrentTotal(item)
			});
		}

    });
}

export async function upDatePrevBtn(item) {

	const btn = $w(`#${item}PrevButton`)

	btn.onClick(() => {

		if (currentPageQuery && currentPageQuery.hasPrev()) {
			currentPageQuery.prev().then(newResults => {
				console.log("New Results", newResults);
				currentPageQuery = newResults; 
				setupRepeaterWithData(currentProduct, newResults.items); 
				updatePageControls(item, newResults); 
				checkCurrentTotal(item)
			});
		}

    });
}


export async function setupRepeaterDetail(item) {

	currentProduct = item; // Update the current product type
    const results = await getCategoryProduct1(item);
    if (results) {
        currentPageQuery = results; // Keep the query for pagination
        setupRepeaterWithData(item, results.items);
        updatePageControls(item, results); // Update or setup pagination controls
		upDateNextBtn(item)
		upDatePrevBtn(item)
		checkCurrentTotal(item)
    }

}

function setupRepeaterWithData(product, items) {
    let id = `#${product}Repeater`;
    $w(id).data = items;
    $w(id).forEachItem(($item, itemData, index) => {
        $item(`#${product}RepeaterImage`).src = itemData.mainMedia;
        $item(`#${product}RepeaterPrice`).text = itemData.formattedDiscountedPrice.toString();
        $item(`#${product}RepeaterTitle`).text = itemData.name;
		$item(`#${product}RepeaterImage`).link = itemData.productPageUrl;  
    });
}

//product can be "ring", "diamond", "earrinng", "..." 
export async function getCategoryProduct1(product) {
	try {
		const results = await wixData.query("Stores/Products")
			.contains("slug", product)
			.lt("price", 4000)
			.limit(12)
			.find();
		console.log("Products:", results.items);
		return results; // Return the whole results object for pagination
    } catch (error) {
        console.error("Error in getCategoryProduct1:", error);
        return null;
    }
    
}

function updatePageControls(item, results) {
    console.log("Total Pages:", results.totalPages, "Current Page:", results.currentPage + 1);
    $w(`#${item}TotalPage`).text = results.totalPages.toString();
    $w(`#${item}CurrentPage`).text = (results.currentPage + 1).toString();
}


![image|533x150](upload://sVpPH49FWMXSdop3pqFYpTH0v9S.png)
7

image
page

8

So true. I just found out it’s still not there in Wix Studio. What the heck is Wix doing?!