Repeater start index

Ask the community
,
1

I want to create 2 repeaters on a page which are connected to the same data set. For the first repeater (shown in the image as green) I want to display the first 8 items. Then in the second repeater (shown in the image as blue) I want the listing to start from the 9th item in the dataset. I wish there was a setting in the repeater to specify the start index. How do I accomplish this with corvid?

482×606 19.1 KB

2

I think you do a query of your data-collection first.
Then you separate the right amount of your data with “skip” and “limit”.

Then you will get some results.

And when you have your results, you load them into your wanted repeater.

Something like…

import wixData from 'wix-data';
$w.onReady(function () {
 wixData.query("myCollection")
    .skip(10)
    .limit(20)
    .find()
    .then( (results) => {
      if(results.items.length > 0) {
        let items = results.items;
        let firstItem = items[0];
        let totalCount = results.totalCount;
        let pageSize = results.pageSize;
        let length = results.length;
        console.log(items)
        console.log(firstItem)
        console.log(totalCount)
        console.log(pageSize)
        console.log(length)
        $w("#myRepeater").data = items
      }else {  }
    })
    .catch( (error) => {
      let errorMsg = error.message;
      let code = error.code;
    });
 });
3

I haven’t done any corvid code in our website yet. I will try to implement this and see how it goes. I notice that on repeaters there is a way to add filters without adding corvid code. But I couldn’t find a filter that does it on the sorted index.

4

If you want to do it with a dateset, you can, but first disconnect from the repeaters (on the page) and do everything by code. Something like:

$w.onReady(() => {
$w("#dataset1").onReady(() => {
 $w("#dataset1").getItems(0, 1000)
.then(r => {
let items = r.items;
$w("#reapter1").data = items.splice(0,9);
$w("#repeater2").data = items;
$w("#repeater1).onItemReady(($i, iData) => {
$i("#image1").src = iData.image;
$i("#text1").text = iData.title;
//etc,,
}) 
$w("#repeater2").onItemReady(($i, iData) => {
$i("#image2").src = iData.image;
$i("#text2").text = iData.title;
//etc,,
}) 
})
})
})
5

@jonatandor35 Will this create the same look and feel of a repeater. The repeater does take care of other factors like the layout of the boxes, fonts etc and also can be customized on a mobile phone. With corvid code will I be able to achieve the same? Here is a screen shot of how it looks now. The right 3 columns is a single repeater. I just want that to wrap around and utilize the full width of the page when the repeater exceeds the length of the text box on the left.

1519×2874 1.18 MB

6

@siliconvalleywoodtur You can still set the design of the repeater elements via the editor.

7

@jonatandor35 Thanks J.D. I will try this out. I have many pages where I could use this code.

8

@jonatandor35 Thank you so much for the code. It works as intended in my test case. I created the second repeater by duplicating the first repeater. Had both of them connected to the same dataset. And used the following code.

$w.onReady( function () {
$w( “#dynamicDataset” ).onReady(() => {
$w( “#dynamicDataset” ).getItems( 0 , 1000 )
.then(r => {
let items = r.items;
$w( “#listRepeater” ).data = items.splice( 0 , 4 );
$w( “#repeater1” ).data = items;
})
})
});

1298×915 137 KB

9

You’re welcome :slight_smile: