Search simultaniously 19 tables

Each data-row inside of your database is a repeated row inside a repeater.

When you have 50-data-rows inside of your DB and you load these 50 data-rows into your repeater, your repeater will show you 50 items generated out of your database.

As we know, everything starts with --> IMPORTS & $w.onReady if it comes to wix-coding.

If you are working with datasets, an import of (for-example) Wix-Data is not needed. At this moment i want to warn those beginners, who tries to mix Wix-Data-APIs with DATASET-CONNECTION and settings inside the PROPERTY-PANEL, in most cases --> those beginners will cry for even mire help, because failing to build up a nice working VELO-CODE based setup.

So let's start with first preparing some EXAMPLE-DATA for our REPEATER....

let exampleData = [
  {
    "_id": "1",
    "firstName": "John",
    "lastName": "Doe",
    "image": "http://someImageUrl/john.jpg"
  },
  {
    "_id": "2",
    "firstName": "Jane",
    "lastName": "Doe",
    "image": "http://someImageUrl/jane.jpg"
  }
];

Following by ---> $w.onReady() which will load the wix-page and get our page ready...

$w.onReady(()=> {............................});

Because we are totaly BEGINNER, we trying always to use CONSOLE-LOGS, to myke our own generated CODE more readable, understandable and plausible.....

$w.onReady(()=> {console.log('page ready...');

});

Wohooo first initial step done.

So what now about our repeater and the colored repeater data-rows?

Not possible to do so? Let's check it out!!!

First we still need some code to load the EXAMPLE-DATA into our REPEATER...

$w('#repeater1').data = exampleData;

And when the REPEATER got his data, we need to make sure, so the repeater shows all data automatically, when the repeater is ready....

$w('#repeater1').onItemReady(($i, iData, i)=>{

});

The MAGIC-TRIPPLE-i !!!

Ok, what next? What else do we need?

Of course we need still some elements to be added into ou repeater like ..

a) Text-element

b) Buttons

c) Dropdowns

d) Images what ever.

In our case we will need a box, which we will add to our repeater setting it's color to 100%-transparent --> this makes the added box invisible. We also strech the box to the full size of a repeated item (container) inside our repeater --> this will be our BACKGROUND later, for showing color on specific lines.

Till here everything clear ?

So let's continue .... (summarizing our code)... we will get some code like...

let exampleData = [
  {
    "_id": "1",
    "firstName": "John",
    "lastName": "Doe",
    "image": "http://someImageUrl/john.jpg"
  },
  {
    "_id": "2",
    "firstName": "Jane",
    "lastName": "Doe",
    "image": "http://someImageUrl/jane.jpg"
  }
];

$w.onReady(()=> {console.log('page ready...');
  $w('#repeater1').onItemReady(($i, iData, i)=>{
     console.log('Item-Data: ', iData);
     console.log('Index: ', i);
  });
});

Let'S say our added box-element has the ID --> 'boxBG' <-- which will represent the colored background.

We have in this example a data of 2-items (2x-data-rows), which we are pushing into the repeater. Inside the repeater there are some elements, including text for first and last-name, and an image + button......

let exampleData = [
  {
    "_id": "1",
    "firstName": "John",
    "lastName": "Doe",
    "image": "http://someImageUrl/john.jpg"
  },
  {
    "_id": "2",
    "firstName": "Jane",
    "lastName": "Doe",
    "image": "http://someImageUrl/jane.jpg"
  }
];

$w.onReady(()=> {console.log('page ready...');
  $w('#repeater1').onItemReady(($i, iData, i)=>{
     
     console.log('Item-Data: ', iData);
     console.log('Index: ', i);
     //------------------------------
     $i('#myImageIdHere').src = iData.image;
     $i('#txtFirstname').text = iData.firstName;
     $i('#txtLastname').text = iData.LastName;
     $i('#myButtonIdHere').onClick(()=>{
         console.log('click');
     });
  });
});

And now the final job we have to do to get our wished functionality.... to get our colorized Rows.....

let exampleData = [
  {
    "_id": "1",
    "firstName": "John",
    "lastName": "Doe",
    "image": "http://someImageUrl/john.jpg"
  },
  {
    "_id": "2",
    "firstName": "Jane",
    "lastName": "Doe",
    "image": "http://someImageUrl/jane.jpg"
  }
];

$w.onReady(()=> {console.log('page ready...');
  $w('#repeater1').onItemReady(($i, iData, i)=>{     
     console.log('Item-Data: ', iData);
     console.log('Index: ', i);
     //------------------------------
     $i('#myImageIdHere').src = iData.image;
     $i('#txtFirstname').text = iData.firstName;
     $i('#txtLastname').text = iData.LastName;
      
     //-----------------------------------
     if(i===1){$i('#boxBG').style.backgroundColor='red';}
     if(i===3){$i('#boxBG').style.backgroundColor='green';}
     if(i===7){$i('#boxBG').style.backgroundColor='blue';}

     $i('#myButtonIdHere').onClick(()=>{
         console.log('click');
     });
  });
});

You of course also can add a special function to mark for example every second or third row to mark it automatically..... and so on......

.....continue......