jQuery Isotope Combination Filter & Sort

I am using the jQuery Isotope plugin for the first time and really liking some of the results however I am having abit of an issue trying to get the 'Combination Filter' to work with the 'Sort' option.

I have had a single filter and sort working together however I cannot get the sort function to work with my combination filter.

My script looks like this,

<script type="text/javascript"> 
  $(function(){

    var $container = $('#container'),
        filters = {};

    $container.isotope({
      itemSelector : '.element',

        getSortData : {
          name : function ( $elem ) {
            return $elem.find('.name').text();
          }
        }
      });

    // filter buttons
    $('.filter a').click(function(){
      var $this = $(this);
      // don't proceed if already selected
      if ( $this.hasClass('selected') ) {
        return;
      }

      var $optionSet = $this.parents('.option-set');
      // change selected class
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');

      // store filter value in object
      // i.e. filters.color = 'red'
      var group = $optionSet.attr('data-filter-group');
      filters[ group ] = $this.attr('data-filter-value');
      // convert object into array
      var isoFilters = [];
      for ( var prop in filters ) {
        isoFilters.push( filters[ prop ] )
      }
      var selector = isoFilters.join('');
      $container.isotope({ filter: selector });

      return false;
    });

    var $sortBy = $('#sort-by');
    $('#shuffle a').click(function(){
      $container.isotope('shuffle');
      $sortBy.find('.selected').removeClass('selected');
      $sortBy.find('[data-option-value="random"]').addClass('selected');
      return false;
    });

  });
</script> 

And my sort code looks like this,

<ul id="sort-by" class="option-set clearfix" data-option-key="sortBy"> 
      <li><a href="#sortBy=original-order" data-option-value="original-order" class="selected" data>Course Date</a></li> 
    开发者_Python百科  <li><a href="#sortBy=name" data-option-value="name">Course Name</a></li> 
      <li><a href="#sortBy=random" data-option-value="random">Random</a></li> 
</ul>

Which is exactly the sort code I was using with a single filter. Can anyone help me or point me in the right direction? I am no expert with jQuery but am trying to learn as I go so any help would be greatly appreciated.

Thanks

Chris

---

I found that in order to implement both sorting and filtering (without glitches), I needed to make two jQuery requests, one for sorting and then another for filtering ...

$('#articles').isotope({
    layoutMode: 'masonry',
    masonry: {
        columnWidth: 164 // size + margin,
    },
    getSortData: {
        recent: function ($e) {
            return parseInt($e.find('.recent').text(), 10);
        },
        liked: function ($e) {
            return parseInt($e.find('.liked').text(), 10);
        },
        discussed: function ($e) {
            return parseInt($e.find('.discussed').text(), 10);
        }
    },
    sortBy: 'liked',
    sortAscending: false,
    itemSelector: 'article',
    animationEngine: 'jquery'
});

$('#articles').isotope({ filter: '.photos' });