Let users filter data in a table

Show and tell
,
41

Hi, I have build a page with datagrid and a dataset connected to it : i have set a Button to filter the dataset; in the same page i have placed 5 input filed . it show field value of the selected record in datagrid
Before I apply the filter all work properly; when I apply the filter, datagrid show only record match the filter but input filed referring the original record in dataset . Why ? Pls help me !!!
Thanks
Fabio

42

OK, so I’ve been clicking around and trying to learn this stuff but can’t seem to make the items discussed work for me. I am very new to the wix code stuff so I do apologize for my ignorance but i have a strong willingness to learn.

Here is a link to a test site I am building trying to learn. I need a filter (or search box) on my repeating list that I can search the vendor name. I tried to use the code that was entered originally but haven’t had any luck.
https://rtodaro18.wixsite.com/napa2/vendor-list

Thanks in advance for the help.

43

@Jonathan
this works perfectly for me

@Jeff
had to slighly adjust, but now works perfectly - thank you!

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 button_click(event, $w){
$w(“#dataset1”).setFilter(wixData.filter()
.contains(“title”, $w(“#filterInput”).value)

	.contains("title2", $w("#filterInput2").value));

}

44

EDIT : ok so I should have read the very comment above mine, it works now !

Message deleted due to lack of reading… lol

45

One question though

  • how can the user applies the filter when he presses the “enter” key after typing in the input element ?

  • how can the user see a “no item found” if the result is void ?

  • how to add a checkbox, that would display items that contain a “yes / no” condition ? (such as available / out of stock)

46

I have no clued. Hope someone can help plz!!! I have no idea how can i check the button with the codings

47

bump !

48

This will probably help you …

https://www.youtube.com/watch?v=Hx7_8-lRsW0&feature=youtu.be

As far as the ‘no results’ … you would have to code in a piece so that if the results === 0 , then show text ‘no results’, etc.

49

Thanks for the video, this could help fix the flickering issue, however I tried to insert the code and it didn’t work, the could have copied/pasted the code somewhere to easily implement it.

As for the ‘no result’ can you provide with the code please ?

50

I’ve encountered another issue, if the page’s dataset has a determined filter, clicking on a button that resets filters will also reset the database’s filter.

In short, the ‘search’ input text / dropdown menu’s reset button will also reset the filter that is preset in the dataset options (like the page is set only to display Black Friday items)

import wixData from 'wix-data';

//modifies the time and date
$w.onReady(function () {
	$w("#dynamicDataset").onReady( () => {
$w("#repeater2").onItemReady( ($w) => {
const originalDate = $w("#text62").text;
const newDate = originalDate.split(' ').splice(1, 4).join(' ');
$w('#text62').text = newDate;
 console.log('Time removed from Date/Time Stamp: New Date ' + newDate);
	});
});
});

//search after typing in the search text input
export function searchInput_keyPress(event, $w) {
	$w("#dynamicDataset").setFilter(wixData.filter()
	.contains("title", $w("#searchInput").value)
	.contains("categorie", $w("#categorieInput").value)
	.contains("vendeur", $w("#vendeurInput").value));
	}


//search after typing in the search text input
export function shape18_click(event, $w) {
	$w("#dynamicDataset").setFilter(wixData.filter()
	.contains("title", $w("#searchInput").value)
	.contains("categorie", $w("#categorieInput").value)
	.contains("vendeur", $w("#vendeurInput").value));
}

//select the 'categorie' inputs
export function categorieInput_change(event, $w) {
		$w("#dynamicDataset").setFilter(wixData.filter()
		.contains("title", $w("#searchInput").value)
		.contains("categorie", $w("#categorieInput").value)
		.contains("vendeur", $w("#vendeurInput").value));
}

//select the 'vendeur' inputs
export function vendeurInput_change(event, $w) {
	$w("#dynamicDataset").setFilter(wixData.filter()
	.contains("title", $w("#searchInput").value)
	.contains("categorie", $w("#categorieInput").value)
	.contains("vendeur", $w("#vendeurInput").value));
}

//resets the 'categorie' input
export function shape16_click(event, $w) {
	$w("#categorieInput").value = null;
	$w("#dynamicDataset").setFilter(wixData.filter()
		.contains("title", $w("#searchInput").value)
		.contains("categorie", $w("#categorieInput").value)
		.contains("vendeur", $w("#vendeurInput").value));
}

//resets the 'vendeur' input
export function shape17_click(event, $w) {
		$w("#vendeurInput").value = null;
		$w("#dynamicDataset").setFilter(wixData.filter()
		.contains("title", $w("#searchInput").value)
		.contains("categorie", $w("#categorieInput").value)
		.contains("vendeur", $w("#vendeurInput").value));
}

here you can see that the dataset is set to only display items that are part of ‘Black Friday’, it works at first, but whenever I reset one of the fields in the ‘search input / dropdown menus’ all items are displayed regardless of whether they are part of Black Friday or not

51

Hi, need some help here. I’m new to wix code. May i know how to run a search button with all the dropdown filter take place? All my item info are in Project list (Database) reference from dropdown lists from Category(Database). I want to show all my content in repeater instead of a table. It would be great if there is a list of coding with explanation/video tutorial. Please help. Thanks

1920×1201 239 KB

52

Hi Jeff, I have a table that is being sorted by the user dropdown selection /search and its working. (Its a property company that displays the number of bedrooms selected and displays the results in a table.)
Now in the database there is also a boolean field that shows if the apartment is available for rent. Now I only want apartments to show up if they are available to rent. Here’s my current code:

$w.onReady(function () {
//TODO: import wixData from ‘wix-data’;
});

export function dropdown1_change(event, $w) {
$w (“#table1”).show ();
$w(‘#dataset1’).setFilter(
wixData.filter()
.eq(‘numberofbeds’, $w(‘#dropdown1’).value)
);

}

The boolean field value is called availability - I’m assuming I add something into the last line so that it is filtered further by availability? Could you please help me as to what I do to filter the results. (PS I did try filtering the dataset by the Boolean field as a way to presort but that didnt work .) Many thanks

53

I’m also interested in filtering items according to the value of the boolean (show available / not available items)

54

Hey 2spacemelbourne (and everyone else),

Been out of office for a couple of weeks, sorry for the delayed response.
You can assign an ID to any element in the editor, using the Properties panel. That ID is how you select elements in your code with the $w selector.

-Jeff

55

Hey Ack,

You probably need to put that code inside the dataset onReady.

-Jeff

56

Hey Fabio,
Not totally clear on the problem. As I understand, you’ve got a table and you want the input elements to display the details of the selected item in the table. That’s working fine. But when you filter the table something’s not working. What are you expecting to happen? Is there an actual item selected then or are you expecting the elements to reset to blank?

When you apply a filter to the dataset, the current item automatically becomes the first item again, so that might be what you’re seeing.

-Jeff

57

Hey rtodaro10,

You had a bunch of onReady functions and you weren’t using click events wired to your buttons from the properties panel. You also need to put any code that works with datasets inside the dataset.onReady function.

Take a look at this:

import wixData from 'wix-data';
$w.onReady(function () {	
});
//resets the 'vendor name' input
export function reset_click(event, $w) { 
	$w("#input1").value = null;
	$w("#dataset1").onReady(() => {
		$w("#dataset1").setFilter(wixData.filter()
		.contains("vendorName", $w("#input1").value));
	});
}
export function filter_click(event, $w) {
	$w("#dataset1").onReady(() => {
		$w("#dataset1").setFilter(wixData.filter()
		.eq("store", $w("#market1").value));
	});
}
export function search_click(event, $w) {
	$w("#dataset1").onReady(() => {
		$w("#dataset1").setFilter(wixData.filter()
		.contains("vendorName", $w("#input1").value));
	});
}

You’ll need to recreate the click events for all the buttons. If the properties panel shows that you have them, just delete them and re-add them.

-Jeff

58

Hey lostsoul,

Please see this thread where we worked through the same issue: https://www.wix.com/code/home/forum/advanced-tips-tricks/remove-duplicates-from-connected-dropdown-options

-Jeff

59

Hey Tristan,

Yes- if you use code to reset the dataset filter it’s going to override any settings you have in the dataset settings panel. Once you start using code to control your dataset you’re going to need continue using code to make it work the way you want.

-Jeff

60

Hey Lorraine,

Just add another condition to your query: https://www.wix.com/code/home/forum/advanced-tips-tricks/you-can-chain-two-or-more-of-the-same-query-functions

-Jeff