Multiple sortable with dropdown (no "table generator")

michele · April 2, 2021, 10:33am

Hello,
I’m creating a “faceted search” module but I’m blocked about the “sortable” function.
For the results I’m not using the “table generator” but a “repeat” on a div section.
Now I have to create three dropdown menu above the results section with these behaviours:

first dropdown, to select the category to use for the sortable;
second, to change the order of the sortable (ASC, DESC);
third, change the number of the results views in the page (3, 6, 9, all).

Below some screenshots to explain better about above:

In practice, I’ve a situation similar to this but without the “table”:

Following the above example, I need to create three dropdown:

first, the possibility to change category to sortable, e.g. name or category;
second, change the order ASC (default) to DESC and viceversa;
third, change the number of the results in the page “3, 6, 9 , All”.

Can someone give me some tips on how to do this with Wappler?
Thanks.

Teodor · April 2, 2021, 10:53am

That is actually really easy.
Create a Paged Query, it will generate the required GET variables for you:

limit - the number of records per page
sort - the column to sort by
dir - the direction

Add your columns to the query builder:

On your page create your 3 selects menus.
Select for sorting - having your column names as values:

Select for direction - having ASC and DESC as values:

Select for number of records shown … having numbers like 10, 20… 100 as values:

Finally when you add the server connect component on the page, select your server action with the paged query and you will see the GET vars there in the Properties panel.
Bind the value of each select in the corresponding GET var.

When the selects values change, the data will be updated automatically.