How to paginate query results?

Ask the community
,
1

Hi all, I have a custom search function that displays database query results in a repeater. I need to be able to add pagination so that users can click through pages of results. Has anyone successfully done this?

This is the current search code:

import wixData from 'wix-data';
import wixLocation from 'wix-location';

wixData.WixDataFilter

$w.onReady(function () {
    $w("#searchbox").focus();
    $w("#searchbox").onBlur((event) => {
        $w("#searchbox").focus()
    });
    $w("#searchedrep").onItemReady(($item, itemData, index) => {
        $item("#event").text = itemData.relatedjob;
 if (itemData.jobdescription === '<p>&nbsp;</p>') {
            $item("#description").html = ""
        } else {
            $item("#description").html = itemData.jobdescription.substring(0, 225) + '...'
        }
        $item("#thumbnail").src = itemData.thumbnail;
        $w("#thumbnail").clickAction = "link";
 let url = 'https://propshop.com' + itemData['link-EventPhotos-relatedjob'];
        $item("#thumbnail").link = url;
        $item("#thumbnail").tooltip = itemData.relatedjob;
        console.log($item("#thumbnail").tooltip)
    })
});

export function searchbutton_click_1(event) {
    wixData.query("EventPhotos")
        .limit(100)
        .isNotEmpty('thumbnail')
        .descending("eventDate")
        .contains("search", $w("#searchbox").value)
        .or(wixData.query("EventPhotos")
            .contains("jobdescription", $w("#searchbox").value))
        .or(wixData.query("EventPhotos")
            .contains("relatedjob", $w("#searchbox").value))
        .find()
        .then((results) => {
            $w("#searchedrep").data = results.items;
            $w("#searchedrep").expand();
            $w("#viewall").expand();

        });
}

export function searchbox_keyPress(event) {
 let key = event.key
 if (key === "Enter") {
        wixData.query("EventPhotos")
            .limit(100)
            .isNotEmpty("thumbnail")
            .descending("eventDate")
            .contains("search", $w("#searchbox").value)
            .or(wixData.query("EventPhotos")
                .contains("jobdescription", $w("#searchbox").value))
            .or(wixData.query("EventPhotos")
                .contains("relatedjob", $w("#searchbox").value))
            .find()
            .then((results) => {
                $w("#searchedrep").data = results.items;
                $w("#searchedrep").expand();
                $w("#viewall").expand();

            });
    } else {
 null
    }
}

Also, on a related note, the reason I’m doing this is because I’m having a very weird issue where only the first row of results interact normally. Everything below the first row of results just scrolls the user back up to the top of the page rather than actually opening the link like it’s supposed to. I’m trying to make the results paginated so that only one row shows up at a time as a temporary fix. So, if anyone knows why the unintended scrolling might be happening, I would be SO GRATEFUL.

Thank you!!

#database #repeater #search #pagination #paginate #query

2

Hi,
You can see instructions how to create a pagination when using Wix Data API here .

If the issue with the scroll on the repeater persists, please contact Wix Customer Care here .

3

Without seeing the site it’s hard to say, but you’re trapping the user here:

    $w("#searchbox").focus();
    $w("#searchbox").onBlur((event) => {
        $w("#searchbox").focus()
    });

This might be why you have weird interaction issues. What was your idea behind doing that?