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?
Indeed, you are correct. Fixing it above.
Yay! that works! I had one small error with your code, the filter in "wixData.Filter" needed to be lowercase.
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') ); }
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 https://www.wix.com/code/reference/wix-data.html#
Or just use the same dataset and add filters and sorts to it.
https://www.wix.com/code/reference/wix-dataset.html