Searching from table

Ask the community
,
1

I’ve got a Searching page that you can search in the position table.
The problem is that when you searching by the “תחום” (which describe as ‘#selection1’ in the code ), you cant get the correct position.
Same problem with searching by the “אזור” (which describe as ‘#selection6’ in the code ).
Thanks!

It’s looks like this -
// חיפוש לפי דרופ דאון של תחום ואזור
export function selection1_click(event) {
wixData.query(‘PositionsManagement’)
.contains(‘title’, $w(‘#selection6’).value)
.contains(‘title’, $w(‘#selection1’).value)
.find()
.then(res => {
$w(‘#table2’).rows = res.items;
});

let query = wixData.query('PositionsManagement') 
if ($w('#selection6').value != 'כל הארץ') { 
	query = query.contains('title', $w('#selection6').value) 
} 
if ($w('#selection1').value != 'כל התחומים') { 
	query = query.contains('title', $w('#selection1').value) 

} 

query.find().then(res => { 
	$w('#table2').rows = res.items; 
})

}

2

Hi Hadar,
Instead of using the Wix-Data API, I recommend filtering the table using regular JS code, and set the table rows with the new filtered data. In order to do so, please follow the instructions below:

  1. Get the original rows data from the dataset:
let originalRows = [];

$w.onReady(function () {
	$w('#positionsManagementDataset').onReady(() => {
		originalRows = $w('#tableJobs').rows;
	});
});
  1. Filter the table using the Array filter method:
function filterTable() {
	let newRows = originalRows;
	const field = $w('#selectionField').value;
	const location = $w('#selectionLocation').value;
	if (field && field !== 'כל המשרות') {
		newRows = newRows.filter(item => item.Field === field);
	}
	if (location && location !== 'כל הארץ') {
		newRows = newRows.filter(item => item.positionLocation === location);		
	}
	$w('#tableJobs').rows = newRows;
}
  1. For each dropdown, create an onChange event and call the ‘filterTable’ function:
export function selectionLocation_change(event) {
	filterTable();
}

Have a good day,
Tal.

3

I Did it all… still don’t work ):
My code -
//קוד חיפוש חדש
let originalRows = [];

$w.onReady(function () {
$w(‘#dataset1’).onReady(() => {
originalRows = $w(‘#table2’).rows;
});
});

function filterTable() {
let newRows = originalRows;
const field = $w(‘#selection1’).value;
const location = $w(‘#selection6’).value;
if (field && field !== ‘כל המשרות’) {
newRows = newRows.filter(item => item.Field === field);
}
if (location && location !== ‘כל הארץ’) {
newRows = newRows.filter(item => item.positionLocation === location);
}
$w(‘#table2’).rows = newRows;
}

export function selection1(event) {
filterTable();
}

export function selection6(event) {
filterTable();
}

4

Hey,

I noticed that you called the filterTable function here:


Instead, you should create an onChange event (clicking the plus sign) and call the function from inside the onChange event function (as explained above, at the third step).

As a general note, I recommend giving meaningful names to the elements instead of leaving the default names so that it’ll be easier for you to understand the code and fix bugs when there is a need.

I duplicated the page (" Copy of כל המשרות ") and corrected it so it works now. I saved the changes and haven’t published it. Please go through the code and let me know if anything is unclear.

Best,
Tal.

5

Hi Tal
Thank you for your reply, It’s working now!
Have a nice day.

6

I would like to see a video tutorial!

7

can anyone make a video tutorial? will be more helpful

8

Can someone help me I will pay you!

9

Hi Tal,
Thanks for providing this solution. My only other question is where do i insert this code (what line)? I’ve attached a copy of my search page code below.

import wixData from “wix-data”;

// For full API documentation, including code examples, visit Velo API Reference - Wix.com

//TODO: write your page related code here…

export function searchbutton_click(event) {

// Runs a query on the “tenant database” collection
wixData.query(“Tenant_Blacklist”)
// Query the collection for any items whose “Name” field contains
// the value the user entered in the input element
.contains(“tenantFullName”, $w(“#input7”).value)
.find() // Run the query
.then(res => {
// Set the table data to be the results of the query
$w(“#table1”).rows = res.items;
});
}
$w.onReady( function () {
$w(“#table1”).columns = [
{
“id”: “col1”, // ID of the column for code purposes
// The field key in the collection whose data this column displays
“dataPath”: “tenantFullName”,
“label”: “tenantFullName”, // The column header
“width”: 100, // Column width
“type”: “string”, // Data type for the column
// Path for the column if it contains a link
“linkPath”: “link-field-or-property”
},
{
“id”: “col2”,
“dataPath”: “photos”,
“label”: “photos”,
“visible”: true ,
“type”: “image”,
“linkPath”: “link-field-or-property”
},
{
“id”: “col3”, // ID of the column for code purposes
// The field key in the collection whose data this column displays
“dataPath”: “scoreOutOf10”,
“label”: “scoreOutOf10”, // The column header
“width”: 100, // Column width
“type”: “string”, // Data type for the column
// Path for the column if it contains a link
“linkPath”: “link-field-or-property”
},

Thanks for your help!
Kind regards,
Leigh

10

Hi all, can someone help me filter the search bar. I need to do “search by state”, just wondering how would that work. Happy to pay. Please contact 6178991966 or liyuele@bu.edu .

11

Here’s a simple example to get you started:

Search a Database

Add search functionality to your site by adding input elements to the page and then adding code to enable a search.

12

@yisrael-wix Hi Yisrael, could you pls advise how to add Filter function with options that customer can click to choose?

13

@tungoslo8 See this example:

Multiple Filter Options
Filter results based on multiple selections in multiple filter groups.

14

@yisrael-wix Thanks a lot for your support, the multiple filter groups works now!

15

@yisrael-wix Could you please make this function available as this is very essential for Repeater? Thanks a lot!