I’m having trouble with / What I’m trying to do
I’m trying to display three different repeaters in my site (same page). Each one of them has a pagination bar, and each of them is connected to a different dataset. All three datasets point to the same collection (not sure if this is the correct thing to do, but as they show different data, I thought it was better to separate).
When connecting to the data sets, I set the “Items per load” to 20, which is just an arbitrary number. My goal is to change this number according to the user settings. I created an info field in the user’s profile, and I want the value of this field to affect the display of the repeaters. So if the user sets the number to 5, each page of the repeater should show 5 elements.
The first page of all three repeaters are displaying the correct number of elements the user has set, but when changing page, the default value (20) that I set when creating the data sets applies and that number of elements are displayed, instead of the number the user set.
When changint the page of one repeater, all repeaters change page, and all of them to the arbitrary value (20).
Is there a simple way to make this work through code?
Your setup sounds correctly setup as if you want to splinter and separate what is shown across different repeaters. I created an example of that here: https://robertor0.wixsite.com/my-site-88
If you’re having issues with the code, it could be that your onChange for one of the pagination bars is affecting all the datasets instead of just the targeted one. Usually for things like this, I’d suggest some troubleshooting the code via console logs which can help you see what is happening when you run/interact with the pagination bars.
The example you created works just as need! Can you please be more specific on how you accomplished it?
Right now, my workflow is something like:
$w.onReady inside of which is a load function for each repeater inside of which is a setup function for the respective pagination bar (through its id) inside of which I have something like: const paginationBar = $w(paginationBarId); paginationBar.onChange(async (event) => { const newPage =event.target.currentPage; call function to handle the next load of elements inside of which there is a function that sets the repeater elements }
I might be overcomplicating things here, I kind of guess that might be the problem…
The data of the repeater I use is only correct in the first page, and it keeps changing other repeaters at the same time. Maybe the onChange function should be completely separate (one for each, and not with this ID approach)?
I just figured out what was the problem!
I had a separate dataset for each pagination bar, but the repeaters were connected to the same one (as I was doing originally, before adding the pagination bars), and that was causing the changes on the other repeaters when changing a single one.
The onChange and the setPageSize functions were also really important, thank you for the precious help!
BUT! There was another problem.
As I’m customizing the repeater page size according to the user settings, I had to overwrite the original page size I was defining inside the Wix Editor, but this led to the repeaters momentarily showing different element data before correcting to the right one when changing page. The number of pages in the pagination bar was momentarily changing as well, like for half a second.
So it happens I had to disconnect all repeaters and their elements from all datasets, and manage these connections entirely through code. When I did that, everything worked fine!
Thank you once again for the tips, you saved me a lot of headaches!
Glad you got it sorted. You responded before I was able to say that within my example, the first three examples are all using the dataset repeater and I too was having some issues using the code for the pagination.
Sometimes you can manage some things with both the default functions and code but usually it’s a good idea to do one or the other. Button clicks are a good example of that as they’re both competing when someone clicks.
Regardless, glad you got it and that the process is here so it can help others who might have the same question.
I’d also be curious about the code and how it looks on the page. Once you have it, feel free to post it in Show and Tell.
