Hello I'm new in coding and i'm trying to create a custom pagination using buttons for my store's search result page. and it require some coding stuff to paginate the results
I need a pagination which allows user to jump to prev and next page but also jump to first and last page of the query result.
Can anyone please! help me in this and send me the code for this type of functionality for my site
here's an example code to add pagination to a dataset in Editor X using Velo:
First, you'll need to add a dataset to your page. Name it 'myDataset', and add the necessary fields.
Next, add a repeater to your page, and connect it to the 'myDataset' dataset.
Add a pagination component to your page, and name it 'myPagination'.
Finally, add the following code to the page's Velo code section:
import wixData from 'wix-data';
let pageSize = 10; // Change this to adjust the number of items per page.
let totalPages;
$w.onReady(function () {
loadPage(1);
});
function loadPage(page) {
let skip = (page - 1) * pageSize;
wixData.query('myDataset')
.limit(pageSize)
.skip(skip)
.find()
.then((results) => {
$w('#myRepeater').data = results.items;
totalPages = Math.ceil(results.totalCount / pageSize);
$w('#myPagination').totalPages = totalPages;
$w('#myPagination').currentPage = page;
});
}
export function myPagination_change(event) {
loadPage(event.page);
}
button73 is the next button
button74 is the last page button
button71 is the previous button
button72 is the return to page 1 button
text306 is the showing page number
$w.onReady(function () { $w('#dataset1').onReady(_ => { if ($w('#dataset1').getTotalPageCount() === 0) { $w('#section63').collapse() } else { $w('#section63').expand() $w('#dataset1').hasNextPage() ? $w('#button73').enable() && $w('#button74').enable() : $w('#button73').disable() && $w('#button74').disable(); $w('#dataset1').hasPreviousPage() ? $w('#button71').enable() && $w('#button72').enable() : $w('#button71').disable() && $w('#button72').disable(); } $w('#button71').onClick(_ => { $w('#dataset1').previousPage() }) $w('#button73').onClick(_ => { $w('#dataset1').nextPage() }) $w('#button72').onClick(_ => { $w('#dataset1').loadPage(0) }) $w('#button74').onClick(_ => { $w('#dataset1').loadPage($w('#dataset1').getTotalPageCount()) }) let pageCount = $w("#dataset1").getCurrentPageIndex(); $w('#text306').text = pageCount.toString() }) })
I shouldn't be different on Editor X.
Try to write the code, and if you get stuck, post it here.