Sorting Database on Button Click

Hey guys, I’m having a hard time trying to figure this out, but I feel I’m close.
I want a data base linked to a repeater and it should sort by show my “Category” field when I click a button with that category’s name.

My example has four categories. Eat & Drink // Shop // Fun // Services.
Right now I have four repeaters styled the same way and show/hide them based on the category button clicked. I really don’t want four repeaters, so can you have the button show only the rows of it’s category from the database?

Here’s my set up.
downtownbentonville.org/explore

I’d love an easier way.

Thanks!

Is the repeater connected to a dataset? If so you can use the wix-dataset API to filter and sort the dataset. (Note: You might experience a know bug. When the repeater is reloaded after the filter or sort the background of the items may turn to white. This is being worked on and should be fixed soon.)

Hi Sam,

  1. I created a collection, import all my products ( women’s apparel) to the collection via CSV,
  2. Added a gallery to a new page
  3. Connected the dataset to my collection
  4. Connected the Gallery to dataset
  5. I managed to create categories as well (for example, dresses, blouses)

Is there any way that I can provide a drop down “Sorting” option above the gallery. (Newest, Price (low to high), Price (high to low), Name A-Z )

Please let me know if this is possible.

Many thanks.

Hey Sam is there a way you could send me a simple example? I’m having a hard time creating the code. Once I see it I can read it and replace the part I need too. Seriously that’d be amazing.

Let’s say you have a button for sorting. You can write something like this:

import wixData from 'wix-data'; 

// ... 

$w("newestButton").onClick(() => {
    $w("myDataset").setSort( 
      wixData.sort() 
      .descending("someDate")
    );
});

Obviously, you will have to change the IDs and field keys in the example with the ones specific to your site.

Awww yeah man thats what I need. Thanks, I’ll give it a shot.

Hi sam,

I have been trying to apply this code on my site for hours without succes.

I have a repeater with text linked all to a collection and i am putting my correct dataset name, the correct field key, but when i click the button nothing happen…

Even to have a simple sort i had to put : $w.onReady( function() { fort the sort to work, wich i dont understand what that code is, i just picked it somewhere when i was searching to make my code work.

I tried adding the ‘on click’ line under the on ready one but now nothing work.

You guessed it, i dont know how to code. lol

Is this can work on a page not dynamic but with dynamic connection that have a dataset?
At first i tought that i needed to put my page dynamic but it changed nothing.

I dont understand what is the difference between a dynamic page and a normal page with a dataset?!

Hey Guillaume,

Could you show us your full page code so we can see in what context you’re adding the code.

In the meantime, a normal page with a dataset and a dynamic page are indeed very similar.

The major difference is what items the dataset contains. On a dynamic page, the items in the dataset are determined by the page’s URL in addition to any filtering applied to the dataset itself. On a regular page the items are determined only by the dataset settings.

Also, a dynamic page dataset cannot be set to write-only. If you think about what we just said above about the URL, I think you will understand why.

Hi, thanks a lot for the reply, in the meantime i got it to work but not with the same code ive seen here or on the wix dataset api, i dont understand why.
I made an event in the parameter of the buttons so it gave me the code to start and ive add the rest of your code with it, its working now, im so happy i can’t even!

Since wix have the DB and the coding…wow, my website was on hold for like 4 years because the options was to limited for what i wanted to acheive but now i see the light and it’s looking good for me to finish it once and for all!
Anyway, sorry for the long story! lol

Another little question, is there any way to have this dynamic page im working on as part of my menu?

I redid that page on a normal page with datasets, for that reason, i needed it to show in my menu, thus why i was asking about the differences.

As of the code, it’s what it gave me at the end:

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

$w.onReady(function () {
//TODO: write your page related code here…

});

export function line3_viewportEnter(event, $w) {
$w(“#box5”).hide();
}

export function line3_viewportLeave(event, $w) {
$w(“#box5”).show();
}

import wixData from ‘wix-data’;

// …

export function button7_click(event, $w) {
$w(“#IndexDataset”).setSort(
wixData.sort()
.ascending(“construction”)
);
}

export function button26_click(event, $w) {
$w(“#IndexDataset”).setSort(
wixData.sort()
.ascending(“nom”)
);
}

export function button28_click(event, $w) {
$w(“#IndexDataset”).setSort(
wixData.sort()
.ascending(“lieux”)
);
}

export function button63_click(event, $w) {
$w(“#IndexDataset”).setSort(
wixData.sort()
.ascending(“nom”)
);
}

You can add a dynamic page to your menu by adding a link as described here: Wix Editor: Adding a Link to Your Menu | Help Center | Wix.com.

Ha! cool

Just did it, but there is a little glitch, the text of the button of the new menu button dont stay in the color state as “clicked”.
Like, my button are gray and becomre green when they are clicked and you are on the same page, but this button stay gray.

I haven’t been able to get it to work yet, but I’ll try that code you posted. Thanks guys!

Up for my last question :slight_smile:
Button stay gray!

I’m having some trouble but it’s almost working.
This is my code. I need it to first sort by the colum name which it “Category” and then by the all rows that are called “Eat & Drink” in that colum. My dataset has no filters or sorting. It’s called “exploreDataset”

Am I getting closer and can someone help? Thanks!