Dynamic Paging Control?

Ask the community
,
1

Does any one have any sample on how to do a dynamic paging control . Refer image attached?

771×74 6.52 KB

The paging should be dynamically driven of a TotalItemCount and ItemsPerPage. The pages are linked to a Repeater Control driven of items in a database.

2

Hi Yashika,

I made a simple example of pagination control using a repeater.
You can find the code and live site below.
There are still a few kinks to solve but the pagination is generally displaying the correct information.

The onClick events should call the function to change the displayed data. Note that the code is only for to the paging control and not to the actual repeater/list that displays the data.

On the page I placed a repeater, a transparent button, two vector arts (two arrows, one pointing left and one pointing right and a text element to display the page number - all placed on top of each other.

724×401 32.9 KB

How it looks when you you have 10 records per page and 81 records in total.

938×431 7.66 KB


function populateRepeater(data) {
	$w("#paginationRepeater").data = data;
	$w("#paginationRepeater").forEachItem(($w, itemData, index) => {
		if (itemData.prevArrow) {
			$w('#prevArrow').show();
			$w('#nextArrow').hide();
			$w('#pageNum').hide();
			$w("#btn").onClick((event, $w) => {
				console.log(event.context.itemId);
			});
		}

		if (itemData.nextArrow) {
			$w('#prevArrow').hide();
			$w('#nextArrow').show();
			$w('#pageNum').hide();
			$w("#btn").onClick((event, $w) => {
				console.log(event.context.itemId);
			});
		}
		
		if ((itemData.number !== 0) && (!itemData.nextArrow) ) {
			$w('#prevArrow').hide();
			$w('#nextArrow').hide();
			$w('#pageNum').text = itemData.number.toLocaleString();
			$w("#btn").onClick((event, $w) => {
				console.log(event.context.itemId);
			});
		}
	});

}

export function submitBtn_click(event, $w) {
	const total = $w('#totalInput').value;
	const perPage = $w('#perPageInput').value;
	const numberOfPages = Math.ceil(total / perPage);
	
	populateRepeater(createRepeaterJson(numberOfPages));
}

function createRepeaterJson(numberOfPages) {
	let data = [];

	for (let i = 0; numberOfPages + 2 > i; i++) {
		let object = {};

		object['_id'] = 'id' + i;
		object['prevArrow'] = false;
		object['nextArrow'] = false;
		object['number'] = i;

		if (i === 0) {
			object['prevArrow'] = true;
		}

		if (i === numberOfPages + 1) {
			object['nextArrow'] = true;
		}
		data.push(object);
	}
	
	return data;
}
3

Hi Ido,

Thank you so much . I am still trying to figure this one out.

Is there a way to transfer above project with images into mine so I can debug and understand the working?

4

Hi Ido,

Thank you so much for your sample code. I have now figured this out and will start connecting this to the repeater control.

5

Ido,

Do you know how I can go to a particular page number on a dataset linked to a repeater control using wix code e.g. page number 5 when user clicks on a button.

I have gone through wix code help at wix-dataset - Velo API Reference - Wix.com, but only see options for loadMore(). Do not see any option to go to a page number. Any help would be appreciated.

6

Hi Yashinka,

The loadMore() function is irrelevant in your situation since it loads data on top of the existing data.
For example if you chose to display 10 items per page and the total number of items is 100 you will see 20 after calling loadMore().

To achieve pagination using the example I provided you will have to disconnect the result repeater and populate it manually.
The example below gets the full list of items and sends the first page to the result repeater. There is still much code to add and fix however this should provide you and others with a good place to start.

You should create a function, based on the createResultsRepeaterJson function, that will receive an array of items and populate the results repeater. Then you will be able to connect each pagination button to the pagination repeater easily.

let currPageNum;
$w.onReady(function () {
	//waits for the dataset to become ready
	$w("#dataset1").onReady(() => {
		//grabs the total count
		let count = $w("#dataset1").getTotalCount();
		//get the full list of items
		$w("#dataset1").getItems(0, count)
			.then((result) => {
				const resultItems = result.items;
				let perPage = $w('#itemsPerPageInput').value; //for example: 10
				let numberOfPages = Math.ceil(resultItems.length / perPage);

				//use arr.slice to extract the items that should be displayed at the moment
				//createResultsRepeaterJson() receices an array and populates the results repeater with the data

				createResultsRepeaterJson(resultItems.slice(0, perPage))
				populatePaginationRepeater(createPaginationRepeaterJson(numberOfPages)); //per the code from my previous reply
				currPageNum = 1;
			})
			.catch((err) => {
				let errMsg = err.message;
				let errCode = err.code;
				console.log(errCode, errMsg)
			});
	});
});

function createResultsRepeaterJson(itemsToPopulate) {
	$w("#resultsRepeater").data = itemsToPopulate;
	$w("#resultsRepeater").forEachItem(($w, itemData, index) => {
		//set the repeater elements with itemData
		
	});

});
7

Hi,

I am still not sure what kind of repeater i suit apply at the bottom.
I don’t need to make button of 1,2,3,4,5,6?

8

Hi,

Use a repeater that populates horizontally.
Then add a box with a number and two vector arrows, each one pointing to a different direction and a button.
See the first screenshot in my first reply.

9

Got a template for this :slight_smile:
https://www.purslowewebdesign.com.au/product-page/wix-code-pagination-template