I have a portfolio page with a loop that shows all posts from the "Portfolio" category.

Within this category I have three more categories, Illustration, Branding, and Web.

I want to be able to filter the posts depending on which category is selected.

I'm trying this:

< div id="filter-category">
  < a class="button" href="#" data-filter="*" class="current">Show All</a >
  < a class="button" href="#" data-filter=".category-illustration" class="current">Illustration</a >
  < a class="button" href="#" data-filter=".category-branding" class="current">Branding</a >
  < a class="button" href="#" data-filter=".category-web" class="current">Web Design</a >
< /div>

And this later down to append the selection to the grid:

$('#filter-category a').click(function(){
  var $selector = $(this).attr('data-filter');
  $container.isotope({ filter: $selector });
  return false;
});

This works, but since all it's basically doing is showing/hiding what's already on the page, it pays no attention to the pagination (a "load more" button using Infinite Scroll). For example, if I click on the "branding" category and there isn't anything from that category on the first page, nothing shows up until "load more" is clicked. So I need to be able to filter ALL the posts, no matter what page they're on. I'm thinking I'll have to do this with some sort of AJAX.

Ideas?