How to make custom pagination in Editor X

Ask the community
, ,
1

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

2

I shouldn’t be different on Editor X.
Try to write the code, and if you get stuck, post it here.

3

Thanks JD but I know nothing about coding So can you please! send me the code that fulfill my requirements.

4

@ssauravsinghind762 There are several different ways to do it.
One way is to create 4 buttons: First Page, Last Page, Prvious, Next.
Once the dataset is ready you check how many pages you have:
https://www.wix.com/corvid/reference/wix-dataset/dataset/gettotalpagecount

If not → hide the buttons.
If yes:
After each page change check if it has next page and previous page and enable/disable the buttons in accordance:
https://www.wix.com/corvid/reference/wix-dataset/dataset/hasnextpage
https://www.wix.com/corvid/reference/wix-dataset/dataset/hasnextpage

Move to next page:
https://www.wix.com/corvid/reference/wix-dataset/dataset/nextpage

Move the previous page:
https://www.wix.com/corvid/reference/wix-dataset/dataset/previouspage

Move to page 1 or to last page (you know what it is from the gettotalPageCount);
https://www.wix.com/corvid/reference/wix-dataset/dataset/loadpage

5

@jonatandor35 still didn’t helped

6

@ssauravsinghind762 post your code.

7

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()

    })
})
8

You shouldn’t use && in these lines. instead do:

if($w('#dataset1').hasNextPage()){
 $w('#button73').enable();
 $w('#button74').enable();
} else {
 $w('#button73').disable();
 $w('#button74').disable();
}
if($w('#dataset1').hasPreviousPage()){
 $w('#button71').enable();
 $w('#button72').enable()
} else {
  $w('#button71').disable();
  $w('#button72').disable();
}
9

here’s an example code to add pagination to a dataset in Editor X using Velo:

  1. First, you’ll need to add a dataset to your page. Name it ‘myDataset’, and add the necessary fields.

  2. Next, add a repeater to your page, and connect it to the ‘myDataset’ dataset.

  3. Add a pagination component to your page, and name it ‘myPagination’.

  4. 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);
}