Problem to filter a table

Ask the community
,
1

Hello,
Sorry if my english is bad, I’m French.

I’m new with the wix code and Javascript and I’m stuck for what I want to do.

I have a table connected to a database with many informations.
I want to filter this table with checkboxes. I would have many checkboxes, search bar, to filter this table.

I try to reproduce what I saw in this forum but anything works.

I succeed to filter just with one checkbox but with two It’s an another problem.

Can you help me ?

Thanks and sorry for my english.

#dataset1 #Casquecheck #Plastrcheck #table1
2

Up !
It’s difficult to find an answer.
I try this code: https://www.wix.com/code/home/forum/community-discussion/searching-from-table but anything…

3

Here the code I use but he don’t work.
My table don’t change when I check my checkbox: #Casquecheck.



// For full API documentation, including code examples, visit http://wix.to/94BuAAs

let originalRows = [];

$w.onReady(function () {
    $w('#dataset1').onReady(() => {
        originalRows = $w('#table1').rows;
    });
});

function filterTable() {
 let newRows = originalRows;
 const field = $w('#Casquecheck').value;
 const location = $w('#Plastrcheck').value;
 if (field && field !== 'Casque') {
        newRows = newRows.filter(item => item.field === field);
    }
 if (location && location !== 'Plastron') {
        newRows = newRows.filter(item => item.field === location);      
    }
    $w('#table1').rows = newRows;
}

export function Casquecheck_change(event) {
    filterTable();
}
4

I up again this post. I really want to know how to do this. I’m lost and have helpful guys will be great.

5

Up…
Seriously ?

6

Hey @wakfoucontact
I will suggest to filter the dataset which is connected to the table
Cause if you filter the dataset it will auto-filter other element connected to the dataset like
Pagination etc.

if your using check box
I assume you need a include function (both the values are considered)

One use .or()

Something like this

import wixData from 'wix-data';

$w.onReady(() => {
$w('#checkbox1 , #checkbox2').onChange(search);
});
function search() {
 let filter = wixData.filter();
 if($w('#checkbox1').checked) {filter = filter.eq("fieldKey1" , "value")} 
 if($w('#checkbox2').checked) {filter = filter.or(wixData.filter().eq("fieldKey2" , "value"))} 
 $w("#myDataset").setFilter(filter);
}

If you want to filter in JS way
Then check this link

7

Thank you for your answer ! I try this tomorrow in the morning.
I have one question: fieldkey1 and value it’s my field on the dataset and value the word I want to filter ?

8

@wakfoucontact
On the database
Hover over the column title
Select the three dots
Click on Manage field
There will be a field key not the field Name

And yes the value is the value you wanna filter

9

@salman-hammed So I try but only one checkbox works. The second don’t work : TypeError: _wixData2.default.filter.eq is not a function

This is my code now:

// For full API documentation, including code examples, visit http://wix.to/94BuAAs

import wixData from ‘wix-data’;

$w.onReady(() => {
$w(‘#Casquecheck , #Plastrcheck’).onChange(search);
});
function search() {
let filter = wixData.filter()
if ($w(‘#Casquecheck’).checked) {filter = filter.eq(“type” , “Casque”)}
if ($w(‘#Plastrcheck’).checked) {filter = filter.or(wixData.filter.eq(“type” , “Plastron”))}
$w(“#dataset1”).setFilter(filter);
}

The fieldkey is the same for both, it’s normal because in my dataset I have many type.

10

@wakfoucontact
sorry my mistake
I am keep missing this parenthesis ()
filter = filter.or(wixData.filter().eq(“type” , “Plastron”))

11

@salman-hammed Thanks. I work on it this night and answer if it’s ok :slight_smile:

12

@salman-hammed So I try. Only one checkbox make the filter (#Casquecheck). The second one don’t filter my table. I want to filter my table with the two checkbox too. If I check #Casquecheck I want only ‘Casque’ on my table. If I check #Plastrcheck I want only ‘Plastron’ on my table. But if I check #Casquecheck and #Plastrcheck, I want ‘Casque’ and ‘Plastron’ appear on my table.

It’s possible ?

13

@wakfoucontact Can you share any link?

14

@salman-hammed Yeah, sorry. The site: https://wakfou.wixsite.com/accueil
It’s on Staff panel for now.

15

@wakfoucontact Try this
if ($w(’ #Casquecheck ‘).checked && $w(’ #Plastrcheck ‘).checked) {
if ($w(’ #Casquecheck ‘).checked) {filter = filter.eq(“type” , “Casque”)} if ($w(’ #Plastrcheck ‘).checked) {filter = filter.or(wixData.filter.eq(“type” , “Plastron”))}
} else {
if ($w(’ #Casquecheck ‘).checked) {filter = filter.eq(“type” , “Casque”)} if ($w(’ # Plastrcheck ').checked) {filter = filter.eq(“type” , “Plastron”)}
}

16

@salman-hammed I replace everything ?

17

@wakfoucontact
Like this
function search() {
let filter = wixData.filter() ;
if ($w(’ #Casquecheck ‘).checked && $w(’ #Plastrcheck ‘).checked) { if ($w(’ #Casquecheck ‘).checked) {filter = filter.eq(“type” , “Casque”)} if ($w(’ #Plastrcheck ‘).checked) {filter = filter.or(wixData.filter.eq(“type” , “Plastron”))} }
else {
if ($w(’ #Casquecheck ‘).checked) {filter = filter.eq(“type” , “Casque”)} if ($w(’ # Plastrcheck ').checked) {filter = filter.eq(“type” , “Plastron”)}
}
$w(" #dataset1 ").setFilter(filter);
}

18

@salman-hammed You forgot again parenthesis ! :slight_smile:
But it works ! Thanks !
If I want to add another checkboxes. How I proceed ?

19

@wakfoucontact lol I don’t know why i am keep doing this?
Now where is that parenthesis!

You need to use else if
To check if the checkbox is selected 3 or 2

i have another idea try hasAll
Like this
filter = filter.hasAll(“type”, [" Casque" , “Plastron” ])

If this work
Then the code will be a lot simple

20

@salman-hammed Where I place this line ? I’m not familiar with Javascript and Wix code sorry if I’m useless