Sorting

Isotope can rearrange the order of item elements based on their data.

$container.isotope({...})

Markup

All the data used for sorting can be kept in the markup. It could be a text value, like a title or tag. Or it could be a number, like a price, measurement, or rating.

For our example, each item element has several data points that can be used for sorting. There’s the elemental symbol, number, name of the element, weight, and category.

<div id="container">
  <div class="item transition metal" data-category="transition">
    <p class="number">79</p>
    <h3 class="symbol">Au</h3>
    <h2 class="name">Gold</h2>
    <p class="weight">196.966569</p>
  </div>
  <div class="item metalloid" data-category="metalloid">
    <p class="number">51</p>
    <h3 class="symbol">Sb</h3>
    <h2 class="name">Antimony</h2>
    <p class="weight">121.76</p>
  </div>
  ...
</div>

getSortData

Isotope reads data from markup with the getSortData option. This option accepts an object. The object’s keys are keywords used to sort by. Object values are either a shortcut string or function to retrieve the data.

var $container = $('#container').isotope({
  getSortData: {
    name: '.name', // text from querySelector
    category: '[data-category]', // value of attribute
    weight: function( itemElem ) { // function
      var weight = $( itemElem ).find('.weight').text();
      return parseFloat( weight.replace( /[\(\)]/g, '') );
    }
  }
});

getSortData strings

Isotope provides shortcut strings to get sort data. By default, a string will be used as a query selector to get the text of a child element for each item element.

name: '.name', // use text of .name element
symbol: '.symbol' // use text of .symbol

A string wrapped in brackets, like '[attribute]', will be used to get the value of an attribute.

// use value of data-category attribute
category: '[data-category]'

There are two additional parser keywords you can add to parse text.

// parse text of .number as an integer
number: '.number parseInt',
// parse text of .weight as a float
weight: '.weight parseFloat'

getSortData functions

You can pass in a function as method. This function is used on each item element to get data. The function provides one parameter itemElem, which is the item element. The function needs to return the data point.

weight: function( itemElem ) {
  // get text of .weight element
  var weight = $( itemElem ).find('.weight').text();
  // replace parens (), and parse as float
  return parseFloat( weight.replace( /[\(\)]/g, '') );
}

sortBy

For every property set in getSortData, Isotope can use it for sorting with the sortBy option. The value of sortBy needs to match a property name in getSortData. With the properties above, we can set sortBy to 'name', 'symbol', 'number', 'weight', and 'category'.

$container.isotope({ sortBy : 'symbol' });

Two additional sortBy options are built in

• 'original-order' will use the original order of the item elements to arrange them in the layout.
• 'random' is a random order.

Multiple sortBy

To sort by multiple properties, you can set sortBy to an array of property names. For example, sortBy: [ 'color', 'number' ] will sort items by color, then by number.

<div class="isotope">
  <div class="mini-item w2 h2" data-color="yellow">
    <p class="number">3</p>
  </div>
  <div class="mini-item w2 h2" data-color="blue">
    <p class="number">2</p>
  </div>
  ...
</div>

var $container = $('#multiple-sort-by .isotope').isotope({
  getSortData: {
    color: '[data-color]',
    number: '.number parseInt'
  },
  // sort by color then number
  sortBy: [ 'color', 'number' ]
});

sortAscending

By default, Isotope sorts ascendingly: A, B, C and 1, 2, 3. To reverse this, set the sortAscending: false.

// sort by number, highest number first
$container.isotope({
  sortBy: 'number',
  sortAscending: false
});

sortAscending can also accept an object, so that you can set ascending order for each sortBy value.

  sortAscending: {
    name: true,
    weight: false,
    category: true,
    number: false
  }

updateSortData

To update sort data after a change has been made to item elements, use the updateSortData method.

$container.isotope('updateSortData').isotope();

Creating interactive buttons

Let’s use a group of buttons for the UI.

<div id="sorts" class="button-group">
  <button data-sort-by="original-order">original order</button>
  <button data-sort-by="name">name</button>
  <button data-sort-by="symbol">symbol</button>
  <button data-sort-by="number">number</button>
  <button data-sort-by="weight">weight</button>
  <button data-sort-by="category">category</button>
</div>

Each button has its sortBy set in the data-sort-by attribute. In the JS, we can use that value when a button is clicked.

// init Isotope
var $container = $container.isotope({
  getSortData: {
    name: '.name',
    symbol: '.symbol',
    number: '.number parseInt',
    category: '[data-category]',
    weight: function( itemElem ) {
      var weight = $( itemElem ).find('.weight').text();
      return parseFloat( weight.replace( /[\(\)]/g, '') );
    }
  }
});
// sort items on button click
$('#sorts').on( 'click', 'button', function() {
  var sortByValue = $(this).attr('data-sort-by');
  $container.isotope({ sortBy: sortByValue });
});