Linking Table search results to dynamic pages

Ask the community
,
15

@birjusonigra1997

Try this…

import wixData from 'wix-data';  
import wixLocation from "wix-location";                       

export function search_click(event) {
  wixData.query("Team")
    .contains("subjects",$w("#Subject").value)
    .find()
    .then(res=>{event
    $w("#TutorResult").rows=res.items;
    $w("#TutorResult").expand();
  });

$w.onReady(function (){
  $w("#TutorResult").columns = [
      {
 "id": "col1",       // ID of the column for code purposes
 // The field key in the collection whose data this column displays  
 "dataPath": "photo", 
 "label": "Profile Pic", // The column header
 "width": 100,       // Column width
 "type" :"image",   // Data type for the column  
      },
      {
 "id": "col2",
 "dataPath": "title",
 "label": "Name",
 "width": 100,
 "type": "Text",
 "linkPath":"link-title",   
      },
      {
 "id": "col3",       // ID of the column for code purposes
 // The field key in the collection whose data this column displays  
 "dataPath": "jobTitle", 
 "label": "Job", // The column header
 "width": 100,       // Column width
 "type": "Text",   // Data type for the column  
      },// more column objects here if necessary
      {
 "id": "col4",       // ID of the column for code purposes
 // The field key in the collection whose data this column displays  
 "dataPath": "location", 
 "label": "Location", // The column header
 "width": 100,       // Column width
 "type": "text",   // Data type for the column  
      },
      {
 "id": "col5",       // ID of the column for code purposes
 // The field key in the collection whose data this column displays  
 "dataPath": "grades", 
 "label": "Grade", // The column header
 "width": 100,       // Column width
 "type": "text",   // Data type for the column  
      }, 
      {
 "id": "col6",       // ID of the column for code purposes
 // The field key in the collection whose data this column displays  
 "dataPath": "rating", 
 "label": "Rating", // The column header
 "width": 100,       // Column width
 "type": "image",   // Data type for the column  
      },
  ]}
)}     

export function searchList_change(){
  wixData.query("level")
  .contains("grades", $w("#dropdown1").value)
  .find()
  .then(res=>{
    $w("#TutorResult").rows=res.items;
  });
}

export function TutorResult_rowSelect(event,$w) {
    console.log(TutorResult_rowSelect(event, $w))
 let rowData = event.rowData;
 let rowIndex=event.rowIndex;
 const myRow=event.target.rows[rowIndex];
    wixLocation.to(`${myRow["team/{Name}"]}`)
}

export function dropdown1_change(event) {
 // Runs a query on the "tutors" collection
    wixData.query("grades") 
 // Query the collection for any items whose "grade" field contains  
 // the value the user selected in the dropdown
    .contains("grades", $w("#dropdown1").value)
    .find()  // Run the query
    .then(res => {   
 // Set the table data to be the results of the query
        $w("#TutorResult").rows = res.items; 
   }); 
}

export function TutorResult_cellSelect(event) {
 let rowData = event.rowData;
 let rowIndex=event.rowIndex;
 const myRow=event.target.rows[rowIndex];
  wixLocation.to(`${myRow["team/{Name}"]}`)
}

This part is strange…

export function search_click(event) {
  wixData.query("Team")
    .contains("subjects",$w("#Subject").value)
    .find()
    .then(res=>{event
    $w("#TutorResult").rows=res.items;
    $w("#TutorResult").expand();
  });

$w.onReady(function (){
  $w("#TutorResult").columns = [
      {
 "id": "col1",       // ID of the column for code purposes
 // The field key in the collection whose data this column displays  
 "dataPath": "photo", 
 "label": "Profile Pic", // The column header
 "width": 100,       // Column width
 "type" :"image",   // Data type for the column  
      },
      {
 "id": "col2",
 "dataPath": "title",
 "label": "Name",
 "width": 100,
 "type": "Text",
 "linkPath":"link-title",   
      },
      {
 "id": "col3",       // ID of the column for code purposes
 // The field key in the collection whose data this column displays  
 "dataPath": "jobTitle", 
 "label": "Job", // The column header
 "width": 100,       // Column width
 "type": "Text",   // Data type for the column  
      },// more column objects here if necessary
      {
 "id": "col4",       // ID of the column for code purposes
 // The field key in the collection whose data this column displays  
 "dataPath": "location", 
 "label": "Location", // The column header
 "width": 100,       // Column width
 "type": "text",   // Data type for the column  
      },
      {
 "id": "col5",       // ID of the column for code purposes
 // The field key in the collection whose data this column displays  
 "dataPath": "grades", 
 "label": "Grade", // The column header
 "width": 100,       // Column width
 "type": "text",   // Data type for the column  
      }, 
      {
 "id": "col6",       // ID of the column for code purposes
 // The field key in the collection whose data this column displays  
 "dataPath": "rating", 
 "label": "Rating", // The column header
 "width": 100,       // Column width
 "type": "image",   // Data type for the column  
      },
  ]}
)}

Especially this one…

export function search_click(event) {
  wixData.query("Team")
    .contains("subjects",$w("#Subject").value)
    .find()
    .then(res=>{event
    $w("#TutorResult").rows=res.items;
    $w("#TutorResult").expand();
  });

$w.onReady(function (){
  $w("#TutorResult").columns = [
      {

OnReady should be the starting point.