Show data from the database in repeater on Wix site.
How to create the database, create the repeater and connect dynamic data.
Hi there, I’m Anna and I created the WixCodeExperts group. We are a team of highly professional specialists with a programming background. We are great with JS, Wix Code, Databases, API integrations, etc. Basically, we can do everything that you might need on your Wix site. Get a quote now.
Read How to create the database first.
Today we will find out:
1. How to create the repeater
2. How to connect repeater to the database
3. How to add simple filters to the dataset(without the code)
4. BONUS. How to create a simple text filter.
- Add the repeater item to the page. It can be found in the “Lists&Grids” section.
There also is a simpler way to show the data — add the table and connect.
2. Add the dataset and choose the database to use. We will choose the ‘Workers’ database.
3. Now we will connect the repeater to the dataset so it could know which data to show. Click on the dataset icon and choose the dataset you added before in 2.
Connecting the repeater won’t be enough, we need to connect every content item to the field in the database.
4. Connect every item of your repeater. I put the corresponding text as a placeholder to make it more clear in the editor. The good solution would be to add the data from one real item, cause when site will be loading wix will first show the item you have in the editor(what you see when edit the repeater) and after that load the data from the database and show items you need. When user has a good internet it won’t be visible, but when it’s not so good, user will see your placeholders for a moment.
5. You can check your result in the preview mode.
As we can see, I connected the photo, First Name, Last Name and Department. You can connect all other items and they will be shown too.
6. Dataset settings. You can add some filters on load. For example you can show only workers under 30.
You can also sort items on load and choose the number of items shown on load.
7. The simple text search field. To add the function to the event you should turn on ‘Properties panel’ in tools menu. In Properties you should choose event when you want to do the search. I will choose onChange of the text field. You can also choose the onClick event for some ‘Search’ button. Just pu the function into field next to the event name in properties panel of the element you want to be a triggering one.
8. The next step would be to set filter on dataset when event happens.
The code we use will look like:
import wixData from 'wix-data';$w.onReady(function () {});export function input1_change(event) { $w("#dataset1").setFilter( wixData.filter() .contains("lastName", $w('#input1').value) )}
input1_change — is a function that will work when trigger action happens (like field is changed in our case).
$w(“#dataset1”) — contains the id of dataset you have to filter
.contains — is a way of how we compare the value in the input field and the database.
“lastName” — is an Field Key that we are using to compare with use input
$w(‘#input1’) — contains the id of input field where user add the text to compare
Thanks for reading! Let me know if you have any questions ♥
I have an awesome team who will help you with any task in Wix.
- Have any questions? Request support via email: webstudioflip@gmail.com :)
- Get help with Velo Wix Code (formerly Corvid) on Fiverr
