You're not eligible to view this page. Click here to access this course or Log In if you've purchased it already

dataset and filters

add a repeater

A repeater is an element that displays your database's items in one page.​

Repeater are crucial when dealing with databases.

In this tutorial we will show you how to add a repeater from the menu and in the next lesson we will explain how to filter this using the dataset and code.

First thing we have to do is to add a repeater from the menu options.

To find a repeater click on the + Button > List & Grids > Repeaters.

In this example we will choose the first repeater given in the menu.

Check the picture to see where to find the repeater

Screen Shot 2020-03-14 at 11.40.05 PM.pn

connect repeater to a dataset

Once a repeater is added, then it' time to add a Dataset that you can find inside the Content Manager Menu.

Now, link the dataset to the database you want, then connect the repeater to the dataset as shown in the Gallery.

Once done you can connect each element inside the repeater to the right field in database.

Check the Gallery to see how to connect the repeater

1/6

filter repeater using dataset

Once you have successfully connected your repeater to the dataset you can open its Settings and set Filters and Sort it the way you prefer.

Click on the dataset settings to Filter and Sort and set the maximum items to display once the page loads.

Check the picture to see how to filter and sort the dataset

Wix Dataset Settings.png

add a pagination

A pagination is a cool function that is needed when having a large number of items in our database.​

By adding a pagination and link it to our Dataset, we can show a certain number of items per time.

For example if in our database we have a total of 100 items, the very best thing to do would be to set a limit of 10 items per page (which you can do inside the Dataset's Settings).

Once the Limit is set and the pagination is added and linked , your Repeater will show 10 items per page for a total of 10 pages.

Pagination is a useful tool to increase Website"s Speed.

Add your pagination 

Check the Picture to see how to add a Pagination

Wix Pagination.png

filter repeater using code

We are finally entering into the coding part, from now on we will be explaining how to filter repeaters using Search bars and dropdowns.

The very first thing to do is to import the wixData library into our code.

We do that by typing this at the very top of the code Tab, before the onReady function.

Copy and paste this code:

import wixData from 'wix-data';

Your code should look like the picture below

Wix Code, WixData

add a search bar

It's time now to start to filter our items in the repeater using a classic search bar.

Let's start adding a Search Ba from the Input Menu.

Choose any style you prefer, then add to the page.

Once done, let's change the ID of the search bar to searchBar.

To change the ID right click on the search bar and select "View Properties", then change its ID.

Check the Gallery to see how to add a search bar and change its ID.

1/5

filter a database field using a search bar

We finally know how to add a repeater, connect it to a Dataset, add a pagination to it and set Filters and Sorts.

Now it's the time to filter these information using a beautiful search bar.

For this example we will be filtering one item in database. The item in database we are going to filter is the City field.

In our Database Properties, we have a list of several houses for sale. We currently have these fields: 

- Title

- City

- Country

- Price

- Photo

Your database should look like the picture below

Wix Database example.png

Now that we finally have our database ready, let's jump into our page where our repeater and search bar is.

As we said we want to filter the repeater by the City field using our new Search Bar.

To do that the first thing to do is to activate the onKeyPress event for the Search Bar.

Once done paste the following code into your code Tab:

let debounceTimer;
export function searchBar_keyPress(event) {
    if (debounceTimer) {
        clearTimeout(debounceTimer);
        debounceTimer = undefined;
    }
    debounceTimer = setTimeout(() => {
        $w("#dataset1").setFilter(wixData.filter().contains("city", $w('#searchBar').value));
    }, 200);
}

 

Your code should look like the picture below

Wix Corvid, Filter Dataset using a searc

*** IMPORTANT ***

notice that we are always filtering using the field key.

Hover over the field and click on the 3 dots, then click on MANAGE FIELD to find the Field Key.

Javascript is case-sensitive, so you must write the field into your code the same way in your field key is, respecting lowerCase and upperCase 

Wix Corvid Field Key.jpg
Wix Corvid Field Key.png

filter two or more fields using a search bar

Now that we know how to filter one item in database, we will show you how to filter 2 or more fields using the same approach.

To do so we just need to add the .or functions as many tiems as we want depending on how many fields we want to filter.

For this example we will filter not only by City but by Country as well.

Your database should look like the picture below

Wix Database example.png

The code is the same but this time we added a string that says to filter by country as well.

To achieve so we use the .or function. So we are basically saying to the site "Search by city or by country".

Paste the following code into your Code tab:

import wixData from 'wix-data';

 

$w.onReady(function () {

    //TODO: write your page related code here...

 

});

 

let debounceTimer;

export function searchBar_keyPress(event) {

    if (debounceTimer) {

        clearTimeout(debounceTimer);

        debounceTimer = undefined;

    }

    debounceTimer = setTimeout(() => {

        $w("#dataset1").setFilter(wixData.filter().contains("city", $w('#searchBar').value)

            .or(wixData.filter().contains("country", $w('#searchBar').value)));

    }, 200);

}

Your code should look like the picture below

Wix Corvid, Filter Dataset using a searc

filter a database field using a dropdown

In this example we will show you how to filter a repeater using a dropdown with a give list of options.

Let's start by adding a dropdown from the same Input Menu, once done add the list one by one that you have inside the repeater.

Remember to add the record "All" as option to retrieve back all cities at once.

To add options to our dropdown, click on Manage Choices then Add Multiple Items at Once.

Once done save.

Your dropdown should look like the one below

arrow&v

Now let's jump into our page where our repeater and dropdown is.

As we said we want to filter the repeater by the City field using our new dropdown.

To do that the first thing to do is to activate the onChange event for the dropdown.

Once done paste the following code into your code Tab:

export function cityDropdown_change(event) {

let dropdownValue = $w("#cityDropdown").value;

 

if (dropdownValue === "All") {

    $w("#dataset1").setFilter(wixData.filter())

} else {

    $w("#dataset1").setFilter(wixData.filter().eq("city", dropdownValue))

}

 

}

Your code should look like the picture below

wix dropdown options.png

*** IMPORTANT ***

notice that in our code we are using for the first time the if/else statement which means: IF this happens then apply this, ELSE apply that.

To learn more about IF/ELSE click here.

filter a database field using a number field

It might happen for several reasons that we will need a Number field in our databases.

In our example as we are using a Property database, we have a Price field which indeed is a number field.

Filtering this Type of field is basically the same as filtering a Text field, the only difference is that we need add the string Number before the $w symbol in our code.

For this example we created another dropdown with prices from $0 to $500,000

Your dropdown should look like the one below and picture attached.

arrow&v

As you can see, the label differs from the value. The label has the $ symbol while the value has only numbers.

This is mandatory if we are having a field number in our database.

The label has the $ symbol just for our reference. This won't affect the code, only the value of each option will.

Now let's activate its its onChange event and paste the code below.

Once done paste the following code into your code Tab:

export function priceDropdown_change(event) {

let priceValue = Number($w("#priceDropdown").value);

 

$w("#dataset1").setFilter(wixData.filter().ge("price", priceValue))

 

}

Your code should look like the picture below

Wix dropdown Price Example.png
Wix price Code and dropdown, Number fiel

*** IMPORTANT ***

notice that in our code instead of using .contains or .eq , we are using the .ge term. This term stand for GREATER EQUAL.

So what we are saying to our code is to filter the prices that are equal or greater than our dropdown choice.

Differences between .eq .contains .ge .le .ne etc...

As we've seen, we al​ready have written several codes using .contains, .eq. and .ge.

In this tutorial we will go through some of them and help you understand when to use.

.eq = is used when we want to filter the exact record in our database

.contains = is used when we want to filter all the items that contain that record

.endsWith = is used to retrieve a field that ends with a specific letter or word

.startsWith = is used to retrieve a field that starts with a specific letter or word

.ge = usually used on a number field needed to filter items greater or equal that specific number

.gt = usually used on a number field needed to filter items greater than a specific number

.le = usually used on a number field needed to filter items less or equal a specific number

.lt = usually used on a number field needed to filter items less than a specific number

.ne =used either on a number and text field needed to filter all items not equal a specific value

These are only some example on how to use these functions.

To learn more about these features, visit the official Wix Api reference.