i have a data table on my site page https://www.wittysprout.com/giveaway-list i would like to see a Sort button like the one below , be it by host,title,date, etc , this would make it easier for my site viewers to find exactly what they want , either the function is not available or i’m just missing on how to do it
Hi Francisco,
You can achieve that using a few lines of code. Assuming the table is connected to a dataset, you can use the dataset’s setSort API to change the sorting (look at the code example in the link). The dataset will then automatically refresh the table to reflect the new sort.
Please give it a try and let us know if it worked.
EDIT: I moved the post to the “Questions & Answers” category.
And this is something my users would be able to click on to sort the list ? and yes its attached to the dataset. unfortunately i know how to use code but im not very good at it , im going to have to find som1 to look into this further for me.
Yes, you can create buttons for each type of sort you want. Each button will have a click event that will execute the setSort code I linked.
ok i’m on the prowl trying to find som1 to make the button for me cuz apparently its above me . Thanks for your replies .
Hi tomer… I need more details about this sort coding ! Here’s the code in API tutorial.
$w(“#myDataset”).setSort( wixData.sort()
.ascending(“lastName”)
.descending(“age”)
)
.then( () => {
console.log(“Dataset is now sorted”);
} )
.catch( (err) => {
console.log(err);
} );
If my collection name is : ‘‘PLAYERS_NAME_IMPORT’’ and the Sorting field is ‘‘RECORD’’ in ascending only my code should be :
$w(“PLAYERS_NAME_IMPORT”).setSort( wixData.sort()
.ascending(“RECORD”)
)
.then( () => {
console.log(“Dataset is now sorted”);
} )
.catch( (err) => {
console.log(err);
} );
There’s probably a error because it’s not working!
any informations will help!
Please make sure you’re using the field key and not its display name. Also, are there any errors in the developer console?
Hi tomer,
here’s the full page code… No error in dev console ! Is it a obligation to assign ascending code to a button ? Because I always need ascending sort for this table. When adding sorting code first line diplay a error !?
Here’s full page code
import wixData from ‘wix-data’;
export function importButton_click_1(event) {
const items = JSON.parse($w(“#textBox”).value);
const collection = $w(“#collectionInput”).value;
items.forEach( (item) => {
wixData.insert(collection, item)
.then( (results) => {
console.log(Added item: ${JSON.stringify(results)});
} )
.catch( (err) => {
console.log(err);
} );
} );
$w(“#textBox”).value = “”;
}
export function button27_click(event) {
let collection = $w(“#collectionInput”).value;
wixData.query(collection)
.find()
.then( (results) => {
$w(“#textBox”).value = JSON.stringify(results.items);
} )
.catch( (err) => {
console.log(err);
} );
}
export function button35_click(event, $w) {
$w(“PLAYERS_NAME_IMPORT”).setSort( wixData.sort()
.ascending(“record”)
);
}
It’s hard to say but you may have an extra curly brace on line 18 that causes the error.
sorry but it make no sense!!!
Please provide a link to your site and we’ll be able to help you better.
Hi thank you! because I’m trying hard and nothing to do! I appreciate Tomer
I didn’t need this sorting code if we never loose custom sorting created into live DB mode! I don’t understand because in Live Edit DB the sorting is still there but refreshing the web page don’t took Live Edit sorting but only LIVE sort !? That make no sense!
When editing collections, either in the editor (sandbox data) or in My Account (live data), filtering/sorting is done for display purposes and does not affect the live site.
Imagine that you want to go over your live data just to check something (for example, number of orders of the same product) and you filter it - that must not affect your live site.
Regarding your error, there are 2 issues there:
- When selecting an element with $w, you need to put the “#” sign and then the element ID as it appears in the properties panel. So, instead of selecting the dataset you want to sort by $w(“PLAYERS_NAME_IMPORT”), you need to select like this: $w(“#dataset5”)
- When working with $w and elements, you need to wait for the page to be ready, just like in regular web development, meaning you need to put any code that interacts with elements inside a “onReady” callback.
The final code should look like this (use this instead of the sort code you added at the end of the file):
$w.onReady(() => {
$w("#dataset5").setSort( wixData.sort()
.ascending("record")
);
});
One issue that is on our side is the non-informative error you got. We will fix it in a future release.
Let me know if you need any further help.
Hi Tomer, First thank you so much for code, you just saved my life!!! I did’t understood that $w(“#myDataset”) was the Dataset icon number in the Page and not the Database NAME itself ! for the rest, I understand!
About what you said for sandbox & live data I’m agree we don’t want to affect the website Live data with, It is why ‘‘Edit Live database’’ Exist, right ? The problem is : if I set a sorting in the Live Edit Database or in the Live data , logically the Live website should take effect with this sorting set method(when publishing site for the LIVE DATA & instant effect for the LIVE EDIT database). For now, this is not the case!
Also ! if I import a new collections for this same database, I don’t want to never loose the sorting previoulsy setted in the Live Edit Database and also keep same sorting in the Live data at import action. Could you just try to make some sorting tests with Live Data and Edit Live Database ! Because I really think it make no sense how it works actually and could help lot of WIX users for their sorting tables problems !
Thank you Tomer 
Hey Ron!
Interesting perspective about sort preservation. Currently, in both Sandbox and Live (incl. Edit Live Database), the filters and sorting there are only for data navigation. These filters and sorting are not pushed to Editor.
If you want to have some data filtered or sorted on site, you need to do that on Dataset, which is different from Database collection.
There are many cases where this is really important. Imagine you have movies website, similar to IMDB.com. Now, one of your pages list all the movies, another one shows you movies of selected director, another one of selected actor, and so on. How could we otherwise build these different pages that all depend on the same movies collection, but require different filters and sorting set?
Hi Tomer,
Is there any way that I can create a drop down “Sorting” option above the gallery, similar to the image shown below.
(Newest, Price (low to high), Price (high to low), Name A-Z )
- I created a collection, import all my products ( women’s apparel) to the collection via CSV,
- Added a gallery to a new page
- Connected the dataset to my collection
- Connected the Gallery to dataset
- I managed to create categories as well (for example, dresses, blouses)
I really like to add Sort button so my customers would be able to click on to sort the list.
I have a very little knowledge about adding codes.
If this is possible or if you can think of any other way to add a Sort button, please can you write it down step by step. I really appreciate it.
Many thanks.
Hi Tomer,
I noticed that you have asked one user to provide their link to allow you to help them better.
After I added all the galleries on individual pages, can i please submit my website link to you.
It would so appreciated if you could please add the sorting buttons to the top right hand corner of the galleries.
Ever since wix removed the csv import option on the 20th November 2017 my website has been stuck on hold, I have been working so hard to come up with a solution, but unable to solve without your kind assistance.
I am not selling physical items, every image is a link to an affiliate image.
All it needs now is the sorting button to finish off the website.
Thank you kindly.
Hello Dilly,
Unfortunately we are not able to code your Wix site on your behalf.
You are welcome to paste your code here and we’ll do our best to assist you.
To make the task a little easier start by adding one sort option, get it to work correctly and continue from there. See the setSort() documentation here
Are you referring to importing CSV files to a data collection?
This feature was opened a few weeks ago.
See more information here .