Sort the filtered result of a repeater

Ask the community
,
1

Hi,

I have a repeater and some user inputs to refine the repeater result. The filtering part is working I have set up a function call filterResults. I have also add a dropdown to sort the repeater per Date to A to Z - Z to A and same for price.

The issue I am facing is I can’t sort the filtered result of the repeater. This mean when I try to sort the repeater let say per price to A to Z, the sorting is not apply to the filtered result is it apply to all the data.

$w(“#dropdown15”).onChange(() => {

if ($w(“#dropdown15”).value === ‘Date - Newest to Oldest’){
$w(“#dataset1”).setSort( wixData.sort()
.descending(“_updatedDate”)
);
}

if ($w(“#dropdown15”).value === ‘Date - Oldest to Newest’){
$w(“#dataset1”).setSort( wixData.sort()
.ascending(“_updatedDate”)
);
}

if ($w(“#dropdown15”).value === ‘Price- Low to High’){
$w(“#dataset1”).setSort( wixData.sort()
.ascending(“price”)
);
}

if ($w(“#dropdown15”).value === ‘Price- High to Low’){
$w(“#dataset1”).setSort( wixData.sort()
.descending(“price”)
);
}

})
2

Hi Frederick,

I’m wondering where this code is on your page code? It needs to be in the onReady event block when written this way. The other alternative is to select dropdown15 and add the onClick event from the property sheet and then copy and paste this code into there (minus the first and last lines).

The only other thing I can think of is to verify that the dropdown value is what you think it is. Insert a console.log( $w(" #dropdown15 ").value ) at the top of the function.

3

Hi Anthony,

Thanks for your reply, actually it is only a part of the code. In fact the sorting function is working but the sorting is always applied to all the data as I used, $w(" #dataset1 ").setSort, what should I do for the sorting to be apply with the filtering? I created a function call filterResults which work through a onClick but when I sort the repeater is no longer filtered the sorting show all the data.

I hope this make sense.

4

@fbegue You would have to show all of your code to give a clear idea of how you’re doing things. I have separate sorting and filtering code on a particular page and don’t lose a filter when a new sort is applied.

5

@tony-brunsman Cool you are the man of the situation then! Here is the code for the filtering:

//// FILTERING

let originalPropertiesInfo = ;
let filteredResults = ;

$w.onReady( function () {
wixData.query(“Annonces”)
.eq(“approuve”, true )
.eq(“categorie”, “À VENDRE”)
.descending(“_updatedDate”)
.find()
.then((results) => {
originalPropertiesInfo = results.items;
$w(“#repeater1”).data = originalPropertiesInfo;
})
. catch ((err) => {
let errorMsg = err;
});
})

function filterResults() {
filteredResults = ;

const type = $w(‘#dropdown1’).value;
const dist = $w(‘#district’).value;
const city = $w(‘#city’).value;
const prixmin = parseInt($w(‘#input15’).value,10);
const prixmax = parseInt($w(‘#input16’).value,10);
const surfmin = parseInt($w(‘#input17’).value,10);
const surfmax = parseInt($w(‘#input20’).value,10);
const chammin = parseInt($w(‘#input21’).value,10);
const chammax = parseInt($w(‘#input22’).value,10);
const park = $w(‘#dropdown13’).value;
const salle = $w(‘#dropdown14’).value;

filteredResults = originalPropertiesInfo.slice();

if (type && type !== ‘Type de bien’) {filteredResults = filteredResults.filter(item => item.typeDeBien === type);}

if (dist && dist !== ‘District’) {filteredResults = filteredResults.filter(item => item.district === dist);}

if (city && city !== ‘Ville/Village’) {filteredResults = filteredResults.filter(item => item.villeVillage === city);}

if (prixmin && prixmin !== ‘Prix min’) {filteredResults = filteredResults.filter(item => item.prixrs >= prixmin );}

if (prixmax && prixmax !== ‘Prix max’) {filteredResults = filteredResults.filter(item => item.prix <= prixmax);}

if (surfmin && surfmin !== ‘Surface min’) {filteredResults = filteredResults.filter(item => item.metrecarre >= surfmin);}

if (surfmax && surfmax !== ‘Surface max’) {filteredResults = filteredResults.filter(item => item.metrecarre <= surfmax );}

if (chammin && chammin !== ‘Chambre min’) {filteredResults = filteredResults.filter(item => item.chambres >= chammin);}
if (chammax && chammax !== ‘Chambre max’) {filteredResults = filteredResults.filter(item => item.chambres <= chammax);}

// + de critere
if (park && park !== ‘Garage/Parking’) {filteredResults = filteredResults.filter(item => item.garageParking >= park);}
if (salle && salle !== ‘Salle de bains’) {filteredResults = filteredResults.filter(item => item.sallesDeBains >= salle);}
if ($w(“#checkbox87”).checked=== true ) {filteredResults = filteredResults.filter(item => item.meuble === true );}
if ($w(“#checkbox88”).checked=== true ) {filteredResults = filteredResults.filter(item => item.neuf === true );}
if ($w(“#checkbox90”).checked=== true ) {filteredResults = filteredResults.filter(item => item.climatise === true );}
if ($w(“#checkbox91”).checked=== true ) {filteredResults = filteredResults.filter(item => item.jardin === true );}
if ($w(“#checkbox92”).checked=== true ) {filteredResults = filteredResults.filter(item => item.piscine === true );}

if (filteredResults.length === 0){$w(‘#repeater1’).collapse(); $w(‘#box9’).show(); $w(‘#box102’).hide(); $w(‘#pagination1’).collapse();}
if (filteredResults.length >= 1) {$w(‘#repeater1’).expand(); $w(‘#box9’).hide(); $w(‘#box102’).show(); $w(‘#pagination1’).expand();}

$w("#text119").text = filteredResults.length.toString() + ' ' + 'annonces'; 

dropdown1_change(); 
city_change(); 
district_change(); 
input15_change(); 
input16_change(); 
input17_change(); 
input20_change(); 
input21_change_1(); 
input22_change_1(); 
dropdown13_change(); 
dropdown14_change(); 
checkbox87_change(); 
checkbox88_change(); 
checkbox90_change(); 
checkbox91_change(); 
checkbox92_change();

}

// Apply filtering to repearter1

export function dropdown1_change(event) {
$w(‘#button3’).onClick(() => {
$w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#input2’).value = itemData.typeDeBien;})
});

}

export function district_change(event) {
$w(‘#button3’).onClick(() => {
$w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#input41’).value = itemData.district;})
});
}

export function city_change(event) {
$w(‘#button3’).onClick(() => { $w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#input42’).value = itemData.villeVillage;})});
}

export function input15_change(event) {$w(‘#button3’).onClick(() => {$w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#input18’).value = itemData.prixrs;})});}
export function input16_change(event) {$w(‘#button3’).onClick(() => {$w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#input18’).value = itemData.prixrs;})});}

export function input17_change(event) {$w(‘#button3’).onClick(() => {$w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#input19’).value = itemData.metrecarre;})});}
export function input20_change(event) {$w(‘#button3’).onClick(() => {$w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#input19’).value = itemData.metrecarre;})});}

export function input21_change_1(event) {$w(‘#button3’).onClick(() => {$w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#input14’).value = itemData.chambres;})});}
export function input22_change_1(event) {$w(‘#button3’).onClick(() => {$w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#input14’).value = itemData.chambres;})});}

export function dropdown13_change(event) {$w(‘#button3’).onClick(() => { $w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#input23’).value = itemData.garageParking;})}); }
export function dropdown14_change(event) {$w(‘#button3’).onClick(() => { $w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#input24’).value = itemData.sallesDeBains;})}); }

export function checkbox87_change(event) {$w(‘#button3’).onClick(() => { $w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#switch2’).value === itemData.meuble;})}); }
export function checkbox88_change(event) {$w(‘#button3’).onClick(() => { $w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#switch8’).value === itemData.neuf;})}); }
export function checkbox90_change(event) {$w(‘#button3’).onClick(() => { $w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#switch10’).value === itemData.climatise;})}); }
export function checkbox91_change(event) {$w(‘#button3’).onClick(() => { $w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#switch11’).value === itemData.jardin;})}); }
export function checkbox92_change(event) {$w(‘#button3’).onClick(() => { $w(‘#repeater1’).data = filteredResults;
$w(‘#repeater1’).forEachItem(($w, itemData) => {$w(‘#switch12’).value === itemData.piscine;})}); }

// Search button
export function button3_click(event, $w) {
filterResults();
}

6

@fbegue Both the sorting and filtering code that I was referencing are directly tied to a dataset, which is an entirely different approach than what you are using here.

7

@tony-brunsman Do you have any idea of what can be done with this approach?

8

@fbegue I know I asked to see your code, but this is a lot to go through here.

Your approach runs a query up front and loads the repeater through code with the data sorted one way. You seemed to be expecting to be able to just re-sort that data, but the repeater and its data are not tied to the dataset you are sorting. You would have to run another query with a different sort and re-load the repeater. Repeaters are a challenge to efficiently load anyway, so the wait time could make your form really frustrating to use.

I wish I could be more help.