Sort A Query Filter

Discussion Ask a question
,
1

I wanted to have buttons that filter onClick and I managed to create these Sort buttons.

// *******************************
// ******SORT FILTER BUTTONS******
// *******************************

export function OldNewButton_onClick(event) {
			console.log("Sorted Videos Oldest To New");
$w("#videos").setSort( wixData.sort()
  .ascending("created")

);
}

export function NewOldButton_onClick(event) {
			console.log("Sorted Videos Newest To Old");
$w("#videos").setSort( wixData.sort()
  .descending("created")
);
}

export function ZAButton_onClick(event) {
			console.log("Sorted Videos Z To A");
$w("#videos").setSort( wixData.sort()
  .descending("title")
);
}

export function AZButton_onClick(event) {
			console.log("Sorted Videos A To Z");
$w("#videos").setSort( wixData.sort()
  .ascending("title")
);
}

They work great as long as there is no existing filter or query.
I want the sort to also work on searched results and filtered results.

I have a bunch of filter buttons with this code.

// ... filter videos to TAG
export function TAGButton_onClick(event) {
		console.log("filtering videos to TAG");

  wixData.query('Videos')
   .contains('tags', 'TAG')
   .descending('created')
   .find()
   .then(res => {
   	    console.log("Dataset is now filtered to TAG"); 
      $w('#resultsTable').rows = res.items; 
    })
      .catch( (error) => {
    let errorMsg = error.message;
    let code = error.code;
  } );
}

When I click one of these buttons it filters to the tag but my Sort (A-Z, ascending…) buttons have no effect. Same if there clicked after a search query.

How can I get the sort buttons to connect to every filter/query and the default dataset?

2

Hey
Make a session handler look at the Storage API. If you click sort A-Z store a variable in a session saying sortAZEnabled.

When clicking search button you check if sort session !== null and then you use WIX-Data to query and sort until you have what you want.

Take a lot at wix-data - Velo API Reference - Wix.com

Or just use the same dataset and add filters and sorts to it.

1 Like
3

Hey there,

I think your issue is that you’re setting your sorts on the dataset but when you filter you’re populating the table from the results of a wix-data query (meaning it’s no longer connected to the dataset).
You can go about this two ways. Either do all the sorting and filtering using the dataset or do all of it using the wix-data query.

I would suggest going the dataset route. That mean changing your TAGButton_onClick( ) function to use the dataset’s setFilter (and possibly also setSort since you’re currently sorting there as well).

Something like this:

// ...filter videos to TAG
export function TAGButton_onClick(event) {
 		console.log("filtering videos to TAG");

  $w("#videos").setFilter( wixData.filter().contains('tags', 'TAG') );
}
1 Like
4

Yay! that works! I had one small error with your code, the filter in “wixData.Filter” needed to be lowercase.

5

Indeed, you are correct. Fixing it above.

6

I had the exact same problem. Eventually guessed that it was switching from the dataset to query data. So thanks for putting that in understandable terms.
I changed my function from query to setFilter but I guess I’m just burnt at this point because I can’t see how to repopulate my table without query’s then(res).