Question

I’m using the jQuery isotope plugin to filter a set of results based on their category. I’m trying to take it one step further and re-sort the filtered results simultaneously (for each category, the items will have a different sort order).

When a category is clicked, the items will be filtered to those with the matching category as a class. In my example below, there are two items: both are categorized as “category-speakers” and “category-supporters” so when I click on either of those categories in the filter navigation, both items appear. What I’d like to do now is have those items sort differently based on which category is in view.

When “Speakers” is selected, “post-1” would show first. When “Supporters” is selected, “post-2” would show first. The sort would be based on an additional class in the item (sort-speakers-1, sort-speakers-2, sort-supporters-1, sort-supporters-2, etc.).

I hope that makes sense! I tried using the getSortData option, but I”m doing something wrong. The isotope docs make sense and I’m able to filter and sort separately.. No luck simultaneously, though.

Simplified filter code below

HTML:

<!-- Grid of filterable/sortable items -->
<div id="Grid">

    <div id="post-1" class="category-supporters category-speakers item sort-speakers-1 sort-supporters-2" data-slug="lorem-ipsum-dolor">
        <div class="itemButton format-standard"></div>
        <div class="small-info" data-permalink="http://external-link.com" data-title="Lorem Ipsum">
            <div class="entry-image clearfix">
                <div class="hover-content zoom">
                    <a title="Lorem Ipsum" href="http://external-link.com" class="preload imgSmall item-preview iconPost" rel="">
                        <img src="logo.jpg" alt="" />
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div id="post-2" class="category-speakers category-supporters item sort-speakers-2 sort-supporters-1" data-slug="lorem-ipsum-dolor">
        <div class="itemButton format-standard"></div>
        <div class="small-info" data-permalink="http://external-link.com" data-title="Lorem Ipsum">
            <div class="entry-image clearfix">
                <div class="hover-content zoom">
                    <a title="Lorem Ipsum" href="http://external-link.com" class="preload imgSmall item-preview iconPost" rel="">
                        <img src="logo2.jpg" alt="" />
                    </a>
                </div>
            </div>
        </div>
    </div>        

</div>

JavaScript:

jQuery(document).ready(function(){

    $container = jQuery('#Grid');

    $container.isotope({
        itemSelector : '.item',
        transformsEnabled: false,
        masonry: {
            columnWidth: 160
        }
    });

   $optionLinks.click(function(){
        var $this = jQuery(this);

        var $optionSet = $this.parents('.option-set');
        $optionSet.find('.selected').removeClass('selected');
        $this.addClass('selected');        
        $this.parent().parent().prev('a').addClass('selected');

        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
        key = $optionSet.attr('data-option-key'),
        value = $this.attr('data-option-value');

        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[ key ] = value;
        if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
            // changes in layout modes need extra logic
            changeLayoutMode( $this, options )
        } else {
            // otherwise, apply new options
            $container.isotope( options );
        }
        return false;
    });    

});

Any suggestions on how to modify the JavaScript to resort each time?

Answer 1

The isotope docs make sense and I’m able to filter and sort separately.. no luck simultaneously, though.

I’m currently working on a project with isotope too. I have found no problems sorting and filtering at once.

I recommend putting your sorting values in a data attribute:

<div data-sort-speaker="1"> 

This makes it easier to retrieve the values (but that’s just me). Then:

$.container.isotope({ 
    // all your other initialization options here.
    getSortData: { 
        speakers: function ($elem) {
            return $elem.data('sort-speaker'); // will return 1 in this example.
        } 
    } 
});

// On button click:
$.container.isotope({filter: '.category-speakers', sortBy: 'speakers'});

Any suggestions on how to modify the JS to resort each time?

You can try calling

 $.container.isotope('reLayout');

each time. But this shouldn’t be needed if you modify the filter or sort options each time.