HTML5 Sorting

by Ian Langworth

HTML

<script src="http://tinysort.googlecode.com/svn/trunk/web/scripts/jquery.tinysort.js"></script>
<ul class="dc-list">
    <li id="newest">Newest First</li>
    <li id="oldest">Oldest First</li>
    <li id="highest">Highest Rated</li>
    <li id="lowest">Lowest Rated</li>
</ul>


<div id="reviews">
    
    <div data-date="2011-01-12 00:23:49" data-rating="3" class="review clearfix">3 stars on 2011-01-12 00:23:49</div>
    
        
    <div data-date="2011-01-11 00:07:50" data-rating="5" class="review clearfix">5 stars on 2011-01-11 00:07:50</div>
        
            
    <div data-date="2010-12-16 05:33:37" data-rating="2" class="review clearfix">2 stars on 2010-12-16 05:33:37</div>
       
       
    <div data-date="2008-11-16 23:03:12" data-rating="5" class="review clearfix">5 stars on 2008-11-16 23:03:12</div>
       
    <div data-date="2007-10-27 22:10:23" data-rating="1" class="review clearfix">1 star on 2007-10-27 22:10:23</div>
       
       
    <div data-date="2010-10-27 22:09:41" data-rating="3" class="review clearfix">3 stars on 2010-10-27 22:09:41</div>
       
    <div data-date="2009-04-24 08:19:08" data-rating="5" class="review clearfix">5 stars on 2009-04-24 08:19:08</div>
       
       
</div>

CSS

.dc-list { margin-bottom: 40px; font-size:11px; }
.dc-list li { float: left; margin-right: 20px; }

.review { margin-bottom: 10px; clear:both; }

JavaScript

// Please name your elements a little more normally, like "#reviews" or "div.reviews" for the container, and ".review" for the items.

$(document).ready(function() {
    var reviews = $('#reviews .review');
    
    $('#newest').click(function(){
        reviews.tsort({ attr: 'data-date', order: 'desc' });
    });
    
    $('#oldest').click(function(){
        reviews.tsort({ attr: 'data-date', order: 'asc' });
    });
 
    $('#highest').click(function(){
        reviews.tsort({ attr: 'data-rating', order: 'desc' });
    });
    
    $('#lowest').click(function(){
        reviews.tsort({ attr: 'data-rating', order: 'asc' });
    });    
});