I have limited the number of items that appear in my repeater to 9 (to offer a faster browsing experience). Of course, my data collection has more than 9 items and I’m looking for a “next page” icon in order to let website visitors advance to see other items beyond this limit of 9. How to I “unlock” this functionality so that my visitors can see beyond the 9 items.
2 Likes
Hey,
You need some coding in order to get this functionality:
- Get all the records from your DB collection using the query function in the onReady page function.
- Create a function that calculates which records you would like to display based on the page number and set the records to the repeaters as explained here .
- Add a Next page button with on onClick event and call the function that you created on step 2 with the updated page number.
I hope it’s clear.
Best,
Tal.
Tai, I am interested too in this matter. What I cannot see yet is how you would maintain state, that is how you would track where you are now (=how many you displayed)? Keeping track in a global var prob. would not work, so what else? In other environments, you would do something like :
…?LastDataId=9&MaxIds=9 in a URL attached to the button (if you displayed the first 9 and 9 is the amount to display). Could you shine some light onto this subject?
Hi Giri,
You keep track on the current state by saving this data to the user’s session storage.
See more in the link below
Ido, thanks, but…: depending on the browser, session storage can be turned off (together with turning off cookies or separate). Isn´t there a more safe and secure way?
Hi!
Store this information in separate collection and use wixData to get and update current state per user.
I think this will work on any browser and with local storage turned off
So how do I identify every individual user without creating a Session, which would bring us back to the same problem? IP-address is not unique, so what else?
Hi there, I’m attempting this too. Currently trying to figure out Tal’s method.
I’ve started with the onReady query.
import wixData from 'wix-data';
$w.onReady( function() {
let repeaterData = $w("#repeater1").data;
wixData.query("Video-Library")
.descending("created")
.limit(6)
.find()
.then( (results) => {
let items = results.items;
let totalCount = results.totalCount;
let currentPage = results.currentPage;
let totalPages = results.totalPages;
let hasNext = results.hasNext();
let hasPrev = results.hasPrev();
let length = results.length;
console.log("Total Items: " + totalCount);
console.log("Current Page: " + currentPage);
console.log("Total Pages: " + totalPages);
console.log("Has Next? " + hasNext);
console.log("Has Prev? " + hasPrev);
console.log("Length: " + length);
});
console.log("Repeater Data: " + repeaterData);
});
I’ve created a function, and a button… but I’m confused on how to approach these steps.
function isThisPage() {
}
export function nextButton_click() {
$w("#nextButton").link = isThisPage + 1;
}
Still lost any guidance is appreciated.
@Giri - “So how do I identify every individual user without creating a Session, which would bring us back to the same problem? IP-address is not unique, so what else?”
Well actually i thought you have members access set up. In this case you can store information per user in user database
If you dont and you have only anonymous users then there is no way to achieve this. Only hope on local storage
@GCC Entertainment
Hi!
I’m not usre you know - there is a built-in functionality exactly for pagination, for repeaters
You can set up actions like “load more”, “next page”, “previous page” on dataset, to which repeater is connected. In this case pressing on those buttons will changee “pages” - by number, which is set in dataset “Number of items to display”
Hey Mikhail! I just found that nifty little function but it’s not working quite as expected. The “Load More” works perfectly but the Next & Previous options isn’t per page, it’s per Item (Next Item/Previous Item). I’ve tested it out a bit;
When I have a limit of 3 items shown on the repeater, I have to click the next button 3 times, in order for it to show the next 3 items. Clicking it once, twice, did nothing, it had to be 3.
When I had a limit of 9 items, I would have to click the button a few times for it to do anything, but then it wouldn’t load multiple items, it would just move down the items in order. I don’t know how to really explain it, but I’ll try.
Default Appearance
1, 2, 3,
4, 5, 6,
7, 8, 9…
Click the button enough times to actually do something, then it shows,
2, 3, 4,
5, 6, 7,
8, 9, 10…
Click…
3, 4, 5,
6, 7, 8,
9, 10, 11…
Felt silly typing that out but it was the simplest way I could explain it.
I think I’m going to use the load more in the meantime, but I would like to do it with pages, for performance’s sake. My repeater items use Preview Gifs and having more than a few of them on a page at a time can really slow the site down.
Hi again! You found existing bug that is handled right now) This is weird and will be fixed for sure
But, i’m talking about next PAGE/previous PAGE.
In dataset’s actions dropdown there are both next item/previous item and next page/previous page - did you check second?
Wonderful
Checking it) thanks
This looks like bug, passed this to dev team, will update you here
Repeaters are the latest developed feature, sorry for bugs in it)
Bug are to be expected with new features like this, no need to apologize! You have no idea how happy I am to know it’s a bug though and not something I’m doing wrong. lol
I have created database of 100 items, I would like to display 10 items per page using a repeater control . User should be able to click on Next/Previous/Last/First page to get to the next / previous /last / First page. Is this possible using a Repeater Control & Dataset? If so, can someone tell me the steps needed to accomplish this ?
Hey Mikhail, just wondering if you’ve heard anything back (I know it’s still kinda early) about the Prev/Next Page Actions bug? I’ve checked multiple browsers and the actions weren’t available on any of them for me.
Hey
No, sorry but not that fast. Need more time, i will update you here