Tinisor is sorted by several attributes (more than 1)

Question

I am trying to use tinysort as part of a mobile application that I create using jQuery mobile. My application finds locations near users' locations, and I want to be able to sort the results quickly on the fly without wasting time re-querying db.

So, I want to use tinysort to re-sort the results based on whether the user has a favorite place in the area, and then by distance, in addition, I want to be able to sort by the "beenthere" attribute if the user noted that they were in location.

This is what I want to do: Sort by favorites:

$("ul#places>li").tsort('',({order:"desc",attr:"myfav"},{order:"asc",attr:"dist"})); 

Sort by Been There:

 $("ul#places>li").tsort('',({order:"desc",attr:"beenthere"},{order:"asc",attr:"dist"})); 

Sort by default: // This is easy and does not work without problems:

 $("ul#places>li").tsort('',{order:"desc",attr:"dist"}); 

With default list order, for example:

 <ul id="places"> <li myfav="0" beenthere="0" dist=".02">Hot Dog Stand</li> <li myfav="1" beenthere="0" dist=".08">Joe Shack</li> <li myfav="0" beenthere="1" dist=".10">Frick frack</li> <li myfav="1" beenthere="1" dist=".15">Mama's</li> </ul> 

Sort by fav should return:

• Joe shack
• Mom's
• Hot Dog Stand
• Freak freck

Sort must be returned:

• Freak freck
• Mom's
• Hot Dog Stand
• Joe shack

Then return the sorting by distance:

• Hot Dog Stand
• Joe shack
• Freak freck
• Mom's

My calls above just don't work with multiple attribute selectors, and my syntax is incorrect, or you cannot sort by multiple criteria.

Any ideas on how I can accomplish this with a solution or another solution is appreciated!

Answer 1

The results above are actually sorted by "asc", not "desc", as you indicated. In any case, I don’t think TinySort has built-in attribute sorting, so it’s best to just combine the attributes you want to sort.

Since distance is the default sort, I thought it best to combine it with a numeric value from another attribute. For example, the myfav attribute is set to "1" to indicate that it is true (I assume this, but it seems to be your intention). If I keep this in front of the distance, this value is above the false zero value - this is the opposite of the sort direction you wanted, so I assigned the true value “0” instead of “1”, and the false value should be “9” instead of “0”. I know this sounds confusing, but check this out:

Sort by Fav:

 Location fav been dist combined 1. Joe Shack 1 0 .08 0.08 2. Mama 1 1 .15 0.15 3. Hot Dog Stand 0 0 .02 9.02 4. Frick frack 0 1 .10 9.10 

Sort by Been There:

 Location fav been dist combined 1. Frick frack 0 1 .10 0.10 2. Mama 1 1 .15 0.15 3. Hot Dog Stand 0 0 .02 9.02 4. Joe Shack 1 0 .08 9.08 

I hope this is clear ... anyway, here is the demo where I did the sort sort, and the code I used is:

 var list = $("ul#places>li"), sortit = function(el, att){ $(el).toggleClass('desc'); var combo, order = $(el).is('.desc') ? 'desc' : 'asc'; // make combo attribute if (att !== 'dist') { list.each(function(){ // attr value = 1 means true, so assign it as a zero // attr value = 0 means false, so assign it as a nine // these numbers + distance, makes sure the lower // values are sorted first combo = $(this).attr(att) === '1' ? '0' : '9'; $(this).attr('combo', combo + $(this).attr('dist')); }); att = 'combo'; } list.tsort('',({order:order,attr:att})); }; // Sort by favorite: $('button:contains(Fav)').click(function(){ sortit(this, 'myfav'); }); // Sort by favorite: $('button:contains(Been)').click(function(){ sortit(this, 'beenthere'); }); // Sort by default $('button:contains(Dist)').click(function(){sortit(this, 'dist'); }); 

Answer 2

I realized that Mottie's solution worked, but it seems a bit complicated ... Calling the binary code worked for me twice:

 listOfItems.tsort({data:sorter, order:direction}) .tsort({data: sorterAlt, order:direction}) 

In your case, it will be (if '' only refer to selected items, you can remove them):

 $("ul#places>li").tsort({order:"desc",attr:"myfav"}) .tsort({order:"asc",attr:"dist"}) $("ul#places>li").tsort({order:"desc",attr:"beenthere"}) .tsort({order:"asc",attr:"dist"}) 

Also use the data-attrname style for HTML5, as suggested by Motti. You can always use data: attrname inside the cera.

Hope this can help you or other people!