Load more button for the filtered data?

Hello, my search bar works okay so far… however whenever i search or filter data, the load more button would appear, onClick it would reload all the data. My question is how to set this button to load more for the filtered data?

Hey
In the click event on the button you can add this code

$w("#myDataset").nextPage();

That code would load in the next page of data to your dataset and it should keep the filter you have setup.

I also think you can click the Button, Connect it to Data and select that Action when clicked without adding any code at all.

Andreas, i don’t have a nextPage, all products are stored on the same page :slight_smile:
my code is

My code now is
export function searchbutShop_click(event) {
wixData.query(‘Stores/Products’)
.contains(‘name’,$w(" #Searchbar “).value)
.or(wixData.query(‘Stores/Products’).eq (‘sku’,$w(” #Searchbar ").value))
.find() .then(res => { $w(’ #Repeater1 ‘).data = res.items;
if (res.length === 0) { $w(’ #Text1 ‘).show();
$w(’ #Loadmorebutton ‘).hide();
} else {
$w(’ #Text1 ').hide()
} });
}

Could you just tell me where and what to add for this code in order to make the “Load More” button loads more items on Click for the searched data ?

Any solution for this?

Did not work for me either! but after wrestling with it for a few days I have a fix as follows:

In my case I was displaying ALL items in a database (in this case collector cars) with a Pagination bar at the bottom of the page. This worked just fine as implemented…

BUT… if you also have a Search field or dropdown search on the database that uses a filter, after the 1st page was displayed in the Repeater, clicking the Next would simply give you the Next page if items in the database without regards for the filter!

My Solution:

  1. add a Next Button to bottom of the repeater. in the Search Button onClick event where the filter was engaged, hide the pagination bar and show the next page button.


Then create an event for the button click… i.e… nextButton_click…

  1. use a repeater1 ItemReady and inside that, add a line to set a session variable capturing the item number being displayed. in my case the car’s Dash#.

export function repeater1_itemReady($w, itemData, index) {
let itemEmail = itemData.email;
let itemDash = itemData.dash;
session.setItem(“Next”, itemDash);

Note: I realize that it will replace the variable for each iteration of the repeater item but I am only interested in the last one displayed.

  1. Make sure your Search variable is defined as a Global variable… ie.e… at top of page after the include statements but before onReady functions.

import wixData from ‘wix-data’;
import wixUsers from ‘wix-users’;
import { session } from ‘wix-storage’;

let colourSearch;

$w.onReady( function () {

  1. copy/duplicate your Wix data query used for the Search function and paste into the nextButton_click code, with the annotated lines added…to retrieve the dash# of the last item displayed on previous page.
    Then include that value created a compound search against the database.

export function nextPage_click(event) {
let last = session.getItem(“Next”); //<<<<<<<<<<<<<<<ADDED
wixData.query(‘CVOA-Registry’)
.gt(“dash”, last) //<<<<<<<<<<<<<<<<<<<<<<<<<ADDED
.contains(“exterior_color”, colourSearch)
.ascending(‘dash’)
.limit(12)
.find()
.then(res => {
$w(‘#repeater1’).data = res.items;
let resultCount = res.totalCount;
let found = resultCount;
// console.log(“# of Remaining Items: " + found);
$w(”#image21").hide();
$w(“#text100”).hide();
$w(“#repeater1”).show();
})
}

  1. Finally. I have a RESET button at the top of my page that when clicked, Hides the Next Button, Shows the Pagination bar, and retrieves the 1st default page of items.

=============
I hope this helps the next person trying to achieve this.
JD

This does NOT work. It always just gets the NEXT item in the dataset regardless of fitler settings. The BUTTON connected to the dataset does the same thing.

Hello,
I have a similare problem. Hope you can help …
In my page I have a dataset limited to 20 items of a collection.
A repeater connected to the dataset and a dropdown button to filter the data to the repeater .
Q1 : what is the difference between a query and filter ?
Q2: the data in the collection is more then 20 - the limit of the dataset.
What is the function I have to define in order load to the repeater the next bulk of the datacollection (21-40
)

here is the code :

export function dropdownarea_change(event) {
$w(“#dynamicDataset”).setSort( wixData.sort()
.ascending(“company_add_city”) );

let area_selection = $w(“#dropdownarea”).value; // get the area value
if (area_selection === “Center”) {
$w(“#dynamicDataset”).setFilter( wixData.filter()
.contains(“area”, area_selection)
.contains(“openjobs_flag”, “Yes”) // only companies with open jobs
.contains(“openjobs_webpage”, “Yes” ) // only companies with career page available
);
}
else if (area_selection === “North”) {
$w(“#dynamicDataset”).setFilter( wixData.filter()
.contains(“area”, area_selection)
.contains(“openjobs_flag”, “Yes”) // only companies with open jobs
.contains(“openjobs_webpage”, “Yes” ) // only companies with career page available
);
}

else if (area_selection === “South”) {
$w(“#dynamicDataset”).setFilter( wixData.filter()
.contains(“area”, area_selection)
.contains(“openjobs_flag”, “Yes”) // only companies with open jobs
.contains(“openjobs_webpage”, “Yes” ) // only companies with career page available
);
}

//test2();
}
Thanks

Q1: As best I can tell, the difference between a query and a filter is that with a filter you have more options…i.e… You can sort the results, limit the number displayed to shorten or override the number from the dataset settings.

Q2: In order to get the next page of Filtered data, the dataset must be sorted in some order (in my case above the dash#). Then to get the next page the query, you need to add a button for Next but do not link it to the database. From Properties Panel, name it nextPage and create an onClick event. Then duplicate your original search but add the AND condition where the item is greater than the last item in the repeater.

Regards,
JD

Hi JD … can you share the code to achieve Q2? Thanks

Q2: In order to get the next page of Filtered data, the dataset must be sorted in some order (in my case above the dash#). Then to get the next page the query, you need to add a button for Next but do not link it to the database. From Properties Panel, name it nextPage and create an onClick event. Then duplicate your original search but add the AND condition where the item is greater than the last item in the repeater.