Filter table from dropdown menu (SOLVED)

Ask the community
,
1

After several hours of searching, videos, articles, and forums I need help from the gurus.

I have a simple dataset table with a list of trips. I want the dropdown, currently correctly displaying the country list, to onChange: filter the table to only display said countries. I’m not a javascript coder but can read it if someone explains. I can’t figure out the correct javascript. Thanks.

918×291 31.3 KB

2

Hay martinlopezfl,

What you want to do is have an onChange event handler on the dropdown that sets a filter to the dataset of the table. It should look some like the following -

// on the top of the page
import wixData from 'wix-data';

// the onChange event - to be created from the property panel
export function DROPDOWN_onChange() {
  let selectedValue = $w('#DROPDOWN').value();
  $w('#DATASET').setFilter(
    wixData.filter().eq('location', selectedValue'));
}
3

Thanks Yoav! it doesn’t quite work as intended. The dataset table does not filter out other rows. It kind of “filters” or rearranges the rows. I had to modify the code a bit, but not sure if selectedValue’ at the end needed a ’ in the beginning. I tried multiple ways to no avail.

I wonder if this is the issue: The dynamic page’s url is set to …/Expeditions. That is the dataset. I don’t have any filters {country}. On this page, all countries display (good). When I select a specific country from the dropdown, the country field in the table shuffles but the other countries still show. Should part of the script tell the page to refresh with the …/Expeditions/country-1 filter? A bit confused.
Here is my script:

4

Ok, I figured it out.

  1. Dropdown input field is disconnected from dataSet and all values have to be manually added (for now- testing other way).
  2. The values have to be Capitalized if the cell content is Capitalized. This will be the filtering system so the column entries are the actual filter values.
  3. Here is the code underneath:

import wixData from “wix-data”;
// For full API documentation, including code examples, visit http://wix.to/94BuAAs
$w.onReady(function () {
//TODO: write your page related code here…
});
export function selectCountry_onChange() { //Dropdown field
console.log(“Trying filtering items to " + $w(”#selectCountry").value);
if ($w(“#selectCountry”).value === ‘all’) { //Default manual value
$w(“#expDataset”).setFilter(wixData.filter()); //Set the dataset filter to all rows
} else {
$w(“#expDataset”).setFilter(wixData.filter().contains(‘country’, $w(“#selectCountry”).value)) //country is my table column name, selected value now in the dropdown now becomes the new filter

		.catch((error) => { 
			let errorMsg = error.message; 
			let code = error.code; 
		}); 
}

}