setPageSize not working

Ask the community
,
1

I’ve got a repeater showing items from my dataset that has lazy loading implemented (i.e. scroll to the bottom of the page and the next batch of items show). There are a series of filters on the page that the user can apply. When a filter is triggered I’ve implemented code which I want to reset the page size and then apply the filter.

However my issue is two fold:

  1. At present is that when you scroll down the page a few times you end up with 100 odd items on the page, apply a filter to those 100 items and it takes AN AGE to apply the filter and update the items displayed.

  2. The set page size isn’t actually applying, the dataset still shows 100 odd items once filtered, rather than resetting in size

Is there any way to:

  1. Firstly, make sure set page size actually applies to the dataset

  2. And, apple the set page size first before applying the filter to speed up execution of the query

Page code is below, I’ve stripped out a bunch to only show relevant bits. Please help I’m so stuck!

// Apply the filter - Price Dropdown
export function apply_filter(event, $w) {
    generalFilter()
    $w("#anchor1").scrollTo()
}

// Various Queries
function queryItContains() {
    $w("#Scraper").setFilter(wixData.filter()
        .contains("auction_house", $w('#auctionHouseDropdown').value)
        .contains("auctiondateshort1", $w('#auctionDateDropdown').value)
        .contains("makeclean", $w('#makeDropdown').value)
        .contains("model", $w('#modelDropdown').value)
        .contains("name", $w('#searchBox').value)
        .between("priceGbpNumber", parseFloat($w('#priceFromDropdown').value), parseFloat($w('#priceToDropdown').value))
    )
}

function queryItContainsMake() {
    $w("#Scraper").setFilter(wixData.filter()
        .contains("auction_house", $w('#auctionHouseDropdown').value)
        .contains("auctiondateshort1", $w('#auctionDateDropdown').value)
        .eq("makeclean", $w('#makeDropdown').value)
        .eq("model", $w('#modelDropdown').value)
        .contains("name", $w('#searchBox').value)
        .between("priceGbpNumber", parseFloat($w('#priceFromDropdown').value), parseFloat($w('#priceToDropdown').value))
    )

function generalFilter() {
// SET PAGE SIZE*********
    $w("#Scraper").setPageSize(21)
        .then(() => {
            console.log("Page size set to 21");
        })
        .catch((err) => {
 let errMsg = err.message;
 let errCode = err.code;
        });
// SELECT RIGHT FILTER
 if ($w('#modelDropdown').value === '' && $w('#makeDropdown').value === '') {
        queryItContains()
    } else {
        queryItContainsMake()
        console.log("4")
    }
}

// Lazy loading
export function loadingStrip_viewportEnter(event) {
    $w("#loadingGif").show();
    $w("#Scraper").loadMore()
        .then(() => {
            $w("#loadingGif").hide();
        }
        )
}
2

I’m having the same issue as your #2. After the user has changed the dataset size, I can’t get the setPageSize to reset back to the original value when they change a dropdown filter option.

3

Managed to crack this in the end. The key was (1) using export async await as per the below and (2) once the page size is set load page 1:

export async function dropdown1_change(event) {
 await $w("#Scraper").setPageSize(9);
 // console.log('page size is set to 21');
 await $w("#Scraper").loadPage(1);
 await sortByFilter();
 await saveFilterPreferences();
}

Example above, you want the awaits to be in order of firing i.e. set page size first, then load page, then apply your dropdown filter.

Any questions, let me know!

4

Thank you! I’ll give that a try.

5

When I add the code, I get an error “Page 1 does not exist”, even though there are numerous pages of data available.

6

Do you want to share the code and a link to the webpage? Happy to take a look