In a previous post I shared  How to combine Isotope Sort and Filter in a real example. At the end of my post I mentioned that should be nice if Isotopo could create dynamically all the sorts/filters within getSorData.

In this post I will share how I achieve that, if you don’t know about Isotope and what is its purpose I invite you to first read my previous post about Isotope.

getSortData option:

“This option accepts an object, whose values are the functions to extract the data. Each function receives one argument, which represents a jQuery object for each item element. With that argument, the function needs to return the data point.”

So, the data extracted can be anything accessible in the item element via jQuery. You can use a text element, numerical data ( using parseInt( ) or parseFloat( ) ), a data attribute or a property like the width of each item element.

Your getSortData functions could looks like the follow:

getSortData: {
    sort1: function($elem) {
        return parseInt($elem.attr('data-category-sort1'), 10);
    },
    bywidth: function($elem) {
        return $elem.width();
    },
    byname: function($elem) {
        return $elem.find('.name').text();
    }
    // more...
}

The problem with this approach is that if you needs a new sorting, well, you will need to add manually that new function inside getSortdata. I have created a function that create these sorting functions dynamically, the function doesn’t cover all the scenarios but is possible to add more easily:

function createSort(){
    var sorts = {};
    var $source = jQuery('source'); //from where I will read data
    $source.each(function() {
        var $element = jQuery(this),
        findBy = $element.children('a').data('sort-type'), //element, numerical data, data attribute or a property
	key = $element.children('a').data('option-value'); //the name of the element, numerical data, data attribute or a property
	//if the sort is based on a css class (an element)
        if(findBy === "class"){
            sortData[key] = function($elem){return $elem.find('.'+ key).text();};
        }
	//if the sort is based on a data attribute (in my scenario is a numerical attribute)
	if(findBy === "attr"){
	    sortData[key] = function($elem){return parseInt($elem.attr('data-category-' + key), 10);};
        }
    });
    return sortData;
}

//then I call the function and pass the result to getSortData
var sort_data = createSort(),
$container.isotope({
    //more code.
    getSortData:sort_data
});

And where is the jQuery(‘source’) that is used inside createSort()?. In my case all the functions are created based on a list of options created with a “ul” and each “li” element correspond to a type of sorting that will be read by my function createSort():

<ul class="sort-by option-set" id="sort-by" data-option-key="sortBy">
	<li><a href="#sortBy=title" data-option-value="title" data-sort-type="class">By Title</a></li>
	<li><a href="#sortBy=sports" data-option-value="sports" data-sort-type="attr">sports</a></li>
	<li><a href="#sortBy=technics" data-option-value="technics" data-sort-type="attr">technics</a></li>
</ul>

And is done!!.. hope you find this information useful.