CODEWITHSUNDEEP
javascriptsortingjquery-plugins
Marc
Marc

Reputation: 137

TinySort - animated sorting example

I am making a leaderboard/highscore with TinySort and it works perfect when I only have numbers it is sorted correctly. But Of course I need to put a name in front of each score, so when I do that it sorts it in alphabetical order because there are characters.

Note: I am using the animated sorting from this plugin: http://tinysort.sjeiti.com/

Heres the code: HTML:

<ol id="xanim" class="xmpl">
  <li id="high1">34</li>
  <li id="high2" >3334</li>
  <li id="high3">344</li>
  <li id="high4">3244</li>
  <li id="high5">3345</li>
  <li id="high6">345</li>
  <li id="high7">35</li>
  <li id="high8">0</li>
  <li id="high9">0</li>
  <li id="high10">0</li>
</ol>
<button onclick="sortHighscore()">sort</button>

JS:

function sortHighscore(){
  $.tinysort.defaults.order = 'desc';
  var $Ul = $('ol#xanim');
  $Ul.css({position:'relative',height:$Ul.height(),display:'block'});
  var iLnH;
  var $Li = $('ol#xanim>li');
  $Li.each(function(i,el){
     var iY = $(el).position().top;
     $.data(el,'h',iY);
     if (i===1) iLnH = iY;
   });
$Li.tsort().each(function(i,el){
  var $El = $(el);
  var iFr = $.data(el,'h');
  var iTo = i*iLnH;
  $El.css({position:'absolute',top:iFr}).animate({top:iTo},500);
 });    }

Upvotes: 1

Views: 2570

Answers (1)

Nate
Nate

Reputation: 4958

TinySort lets you set your own custom sorting function to deal with cases like this. Inside the function, you can manually strip out the names from your values and compare only the numbers.

$Li.tsort({
    sortFunction: function (a, b) {

        // Remove the text from your item, leaving only the numbers
        var aNum = a.e.text().split(' ')[1];
        var bNum = b.e.text().split(' ')[1];

        return bNum - aNum;
    }
});

Live Demo

Update:

To answer the question you asked in a comment, you can easily mark up your content in different ways to make it easier for you to update. For instance, you could wrap names and scores in spans, then just update your sorting function.

sortFunction: function (a, b) {
  // Perform whatever logic we need to go from the items to be sorted (the list items)
  // to the text we actually want to compare (scores)
  var aNum = a.e.find('.score').text();
  var bNum = b.e.find('.score').text();

  // Return a comparison of the scores
  return bNum - aNum;
}

Live Demo

The most important thing is to understand sorting functions, which will help you over and over again throughout your life as a programmer. a and b are just two items to be compared, and your function should return a comparison that tells it which to put ahead of the other.

The TinySort plugin tells you in its documentation that a and b have several properties, one of which is e, the jQuery object that contains the sorted item. That means you can use any jQuery methods you need to get only the item you want to compare - in your case, the score.

In the demo I have the score sometimes before the name and sometimes after, but you can see that when you sort it, it all gets accurately sorted by score regardless.

Upvotes: 3

Related Questions