Hide Pagination Buttons on first/last page of repeater

Ask the community
, ,
1

Hello there! I have set up a repeater on my page to display some featured items in my store.
Rather than using the pre-built number pagination, I linked “basic shape” arrows pointing left and right to the database “next page” and “previous page”, and they operate just fine.
The problem I am having is that I would like the arrows to disappear when you are at the first or last page of the repeater.

1037×408 302 KB

I tried my best to look online for a good solution, but they either applied to the pre-built pagination or navigating the full site rather than just the repeater.
Any advice for a simple code to hide them when the parameter of being on the first page for the left button, and the last page for the right button is met would be amazing.
Thanks!

2

You surely have connected your REPEATER via a DATASET with your COLLECTION, since you did not mentioned and showed any CODE.

If so, then you normaly should be able to control the NEXT & PREVIOUS BUTTONS on the dataset itself.

With this you can CHECK if there is a NEXT or a PREVIOUS ITEM …
You will get as RESULT either a TRUE or a FALSE output (boolean-vlaue).

$w.onReady( () => {
  $w("#myDataset").onReady( () => {
    let hasPrevious = $w("#myDataset").hasPrevious(); // true

  });
});

Depending on the RESULT you can show or hide your NEXT / PREVIOUS button using a simple IF-ELSE-QUERY…

example:

if( .......... ) { .......... }
else { ......... }

if( hasPrevious === false ) {$w('#myPreviousButtonIDhere').hide()}
else {$w('#myPreviousButtonIDhere').show()}
3

I implemented the code to the best of my ability, but It doesn’t seem to work.
I really do apologize for my lack of coding skills. I posted in this part of the forum knowing that I would probably have to implement some type of code in order to do what I wanted but this is my first time doing anything but simple CSS editing.
Likely, there is something incredibly obvious or missing that I did wrong.
I really appreciate your help so far!

import wixData from 'wix-data';

$w.onReady( () => {
  $w("#dataset1").onReady( () => {
 let hasPrevious = $w("#dataset1").hasPrevious(); // true
 {if( hasPrevious === false ) {$w('#back').hide()}
else {$w('#back').show()}
 }
 });

$w.onReady( () => {
  $w("#dataset1").onReady( () => {
 let hasNext = $w("#dataset1").hasNext(); // true
 {if( hasNext === false ) {$w('#forward').hide()}
else {$w('#forward').show()}
 }
 });
});
4
  1. Use just 1x onReady on your page-code…
$w.onReady(()=>{

	//all your page-code here .......(ecxept of functions)
	//no other onReady coding

});
  1. Do you have the same issue, like …?
    https://www.wix.com/velo/forum/coding-with-velo/next-and-previous-button