Hi, I have a dynamic page with a table that shows a list of entries from a collection, with a few columns showing from the many available in the collection. I want to offer users an easy way to filter the table to show only certain entries that match the user’s filtering options on the page.
I have a dataset on the dynamic page called #dataset1 filtered to show only collection entries that match a ‘true’ boolean setting in one collection column and a certain text entry in another collection column. That text entry in the collection is taken from a Reference to another collection, so I have another dataset on the dynamic page called #dataset2 linked to that second collection to make sure the filtering happens properly. Complicated but effective 
I have used the following code, taken from other forum entries I found on Corvid:
import wixData from 'wix-data';
$w.onReady(function () {
//TODO: write your page related code here...
});
export function Filter_click(event, $w) {
$w("#dataset1").onReady(() => {
let filter = wixData.filter().eq("characterWorld".value, "Viking Fantasy").eq("published", true)
if ($w("#Search").value) {
filter = filter.contains("title", $w("#Search").value)
}
if ($w("#Type").value) {
filter = filter.eq("characterType", $w("#Type").value)
}
if ($w("#Ident").value){
filter = filter.eq("characterGender", $w("#Ident").value)
}
$w("#dataset1").setFilter(filter)
if ($w("#Likes").value === "Ascending") {
$w("#dataset1").setSort(wixData.sort()
.ascending("charLikes"))
}
if ($w("#Likes").value === "Descending") {
$w("#dataset1").setSort(wixData.sort()
.descending("charLikes"))
}
if ($w("#Views").value === "Ascending") {
$w("#dataset1").setSort(wixData.sort()
.ascending("charViews"))
}
if ($w("#Views").value === "Descending") {
$w("#dataset1").setSort(wixData.sort()
.descending("charViews"))
}
})
}
I have a plain text #Search box, a #Type dropdown with selectable entries that match the collection entries (because those are chosen as Reference to another collection so I can’t connect them to a dataset), a #Ident dropdown with a similar setup, #Likes and #Views dropdowns to sort the table in ascending or descending order of the relevant columns, and a #Filter button with an onClick event set up on it.
(see screenshot below)
The Likes and Views sorting work fine. The Reset button works fine (I haven’t included the code for that but it’s fine). The Filter button doesn’t work with
#Search,
#Type or
#Ident.
Any ideas?
Hi Nicolas,
Your filtering approach has a chance of working after you correct one thing. Where you have the following:
.eq("characterWorld".value, "Viking Fantasy")
You don’t need the .value on it; just the field name will do. The .value causes an error, so the filter does not get applied.
Thanks for that. I tried removing it, it doesn’t change anything. I don’t think this causes an error, I have the same code on the Reset button I have on the same page (so the table reverts back to the initial list when inputs are reset) and it works just fine there.
I think the problem is that the filtering doesn’t cope well with empty inputs, and also that those inputs relate to fields in the collection that are References to other collections.
Any thoughts given this additional information?
@nicolasforzy The error doesn’t show in the Corvid console, but it does in a browser console (Chrome) :
I tried your code on a collection without references (adjusting field names to fit that collection) and it returned the expected results after removing the “.value”. It doesn’t do anything and returns the above error with the “.value” included.
@tony-brunsman But when I take out the ‘.value’ at the end, in both my Filter event code and my Reset event code, the Reset doesn’t work anymore, it returns a blank table. The Filter doesn’t work either. I’ll try changing my database field parameters so that they are no longer References and I’ll see if that makes a change.
Fingers crossed, though any further ideas or comments are welcome. 
So, it turns out using References in my collections was not a good idea. Filtering seems to have trouble when you’re trying to use as a filtering entry a variable that is a Reference to another collection!
Basically, the lesson is: if people other than you are going to enter data into your collections through a user interface, don’t use References.
I had to take out all References from all 12 of my collections and change them to Text, then retype manually all the entries, taking great care not to have any typos. I kept the source collections I was using as Reference lookups because I managed to use them with the dropdown inputs for filtering - this means I just need to update those source collections if I want to change the list of options available.
Anyway, the code that I have now tested and found to work for filtering with multiple inputs, as well as sorting, and with a reset button, now looks like this:
import wixData from 'wix-data';
$w.onReady(function () {
//TODO: write your page related code here...
});
export async function Filter_click(event, $w) {
let filter = wixData.filter().eq("characterWorld", "Viking Fantasy").eq("published", true);
if ($w("#Search").value) {
filter = filter.contains("title", $w("#Search").value);
}
if ($w("#Type").value) {
filter = filter.eq("characterType", $w("#Type").value);
}
if ($w("#Ident").value) {
filter = filter.eq("characterGender", $w("#Ident").value);
}
if ($w("#Likes").value === "Ascending") {
$w("#dataset1").setSort(wixData.sort()
.ascending("charLikes"))
}
if ($w("#Likes").value === "Descending") {
$w("#dataset1").setSort(wixData.sort()
.descending("charLikes"))
}
if ($w("#Views").value === "Ascending") {
$w("#dataset1").setSort(wixData.sort()
.ascending("charViews"))
}
if ($w("#Views").value === "Descending") {
$w("#dataset1").setSort(wixData.sort()
.descending("charViews"))
}
$w("#dataset1").setFilter(filter);
}
export function Reset_click(event) {
//Add your code for this event here:
$w("#Search").value = null;
$w('#Type').value = null;
$w('#Ident').value = null;
$w("#Likes").value = null;
$w("#Views").value = null;
$w("#dataset1").refresh();
$w("#dataset1").onReady(() => {
$w("#dataset1").setFilter(wixData.filter()
.eq("characterWorld", "Viking Fantasy")
.eq("published", true)
);
$w("#dataset1").setSort(wixData.sort()
.descending("_updatedDate")
);
})
}
I hope this helps, let me know if you want any specifics on any part of the code or setup.
