Sorting

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

$grid.isotope({...})

HTML

All the data used for sorting can be set in the HTML. For the example at the top of the page, each item element has several data points that can be used for sorting.

<div class="grid">
  <div class="element-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="element-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 HTML with the getSortData option. getSortData is set with 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 $grid = $('.grid').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

When a getSortData value is set to a string, the string will be used as a query selector to get the text of a child element for each item element by default.

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]'

Data values can be parsed into numbers by adding parser keywords to the shortcut string.

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

getSortData functions

getSortData values can be set to a function. 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 key in getSortData. With the properties above, sortBy can be set to 'name', 'symbol', 'number', 'weight', and 'category'.

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

Two additional sortBy options are built in.

$grid.isotope({ sortBy : 'original-order' });
// original order of the item elements

$grid.isotope({ sortBy : 'random' });
// random order

Multiple sortBy

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

<div class="grid">
  <div class="grid-item" data-color="yellow">
    <p class="number">3</p>
  </div>
  <div class="grid-item" data-color="blue">
    <p class="number">2</p>
  </div>
  ...
</div>

var $grid = $('.grid').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 sort descendingly Z, Y, X, and 9, 8, 7, set sortAscending: false.

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

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

$grid.isotope({
  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.

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

UI

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

<div class="button-group sort-by-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 value set in the data-sort-by attribute. In the JS, we can use that value when a button is clicked.

// init Isotope
var $grid = $grid.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
$('.sort-by-button-group').on( 'click', 'button', function() {
  var sortByValue = $(this).attr('data-sort-by');
  $grid.isotope({ sortBy: sortByValue });
});