File: D:/web/expressmusic/isotope-docs/isotope-docs/sorting.html
<!doctype html>
<html class="export">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<meta name="description" content="filter & sort magical layouts">
<title>Isotope · Sorting</title>
<!-- Isotope does not require any CSS files -->
<link rel="stylesheet" href="css/isotope-docs.css" media="screen">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@metafizzyco">
<meta name="twitter:url" content="http://isotope.metafizzy.co/sorting.html">
<meta name="twitter:title" content="Isotope Sorting">
<meta name="twitter:description" content="filter & sort magical layouts">
</head>
<body class="page--sorting" data-page="sorting">
<div class="nav">
<h1 class="nav__title"><a href=".">Isotope</a></h1>
<ol class="site-nav">
<li class="site-nav__item site-nav__item--filtering">
<a class="site-nav__item__link" href="filtering.html">Filtering</a></li>
<li class="site-nav__item site-nav__item--sorting">
<a class="site-nav__item__link" href="sorting.html">Sorting</a></li>
<li class="site-nav__item site-nav__item--layout ">
<a class="site-nav__item__link" href="layout.html">Layout</a>
</li>
<li class="site-nav__item site-nav__item--layout-modes sub-nav-parent">
<a class="site-nav__item__link" href="layout-modes.html">Layout modes</a>
<ul class="sub-nav">
<li class="sub-nav__item sub-nav__item--masonry">
<a class="sub-nav__item__link" href="layout-modes/masonry.html">masonry</a></li>
<li class="sub-nav__item sub-nav__item--fitrows">
<a class="sub-nav__item__link" href="layout-modes/fitrows.html">fitRows</a></li>
<li class="sub-nav__item sub-nav__item--vertical">
<a class="sub-nav__item__link" href="layout-modes/vertical.html">vertical</a></li>
<li class="sub-nav__item sub-nav__item--packery">
<a class="sub-nav__item__link" href="layout-modes/packery.html">packery</a></li>
<li class="sub-nav__item sub-nav__item--cellsbyrow">
<a class="sub-nav__item__link" href="layout-modes/cellsbyrow.html">cellsByRow</a></li>
<li class="sub-nav__item sub-nav__item--masonryhorizontal">
<a class="sub-nav__item__link" href="layout-modes/masonryhorizontal.html">masonryHorizontal</a></li>
<li class="sub-nav__item sub-nav__item--fitcolumns">
<a class="sub-nav__item__link" href="layout-modes/fitcolumns.html">fitColumns</a></li>
<li class="sub-nav__item sub-nav__item--cellsbycolumn">
<a class="sub-nav__item__link" href="layout-modes/cellsbycolumn.html">cellsByColumn</a></li>
<li class="sub-nav__item sub-nav__item--horizontal">
<a class="sub-nav__item__link" href="layout-modes/horizontal.html">horizontal</a></li>
</ul>
</li>
<li class="site-nav__item site-nav__item--options">
<a class="site-nav__item__link" href="options.html">Options</a></li>
<li class="site-nav__item site-nav__item--methods">
<a class="site-nav__item__link" href="methods.html">Methods</a></li>
<li class="site-nav__item site-nav__item--events">
<a class="site-nav__item__link" href="events.html">Events</a></li>
<li class="site-nav__item site-nav__item--license">
<a class="site-nav__item__link" href="license.html">License</a></li>
<li class="site-nav__item site-nav__item--appendix">
<a class="site-nav__item__link" href="appendix.html">Appendix</a></li>
<li class="site-nav__item site-nav__item--faq">
<a class="site-nav__item__link" href="faq.html">FAQ</a></li>
</ol>
<ul class="page-nav" data-js-module="page-nav">
<li class="page-nav__item page-nav__item--h2"><a href="#html">HTML</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#getsortdata">getSortData</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#getsortdata-strings">getSortData strings</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#getsortdata-functions">getSortData functions</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#sortby">sortBy</a></li>
<li class="page-nav__item page-nav__item--h3"><a href="#multiple-sortby">Multiple sortBy</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#sortascending">sortAscending</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#updatesortdata">updateSortData</a></li>
<li class="page-nav__item page-nav__item--h2"><a href="#ui">UI</a></li>
</ul>
</div>
<div id="content" class="main">
<div class="primary-content">
<h1>Sorting</h1>
<p>Isotope can rearrange the order of item elements based on their data.</p>
<div class="big-demo go-wide" data-js-module="sorting-demo">
<div class="button-group sort-by-button-group js-radio-button-group">
<button class="button is-checked" data-sort-by="original-order">original order</button>
<button class="button" data-sort-by="name">name</button>
<button class="button" data-sort-by="symbol">symbol</button>
<button class="button" data-sort-by="number">number</button>
<button class="button" data-sort-by="weight">weight</button>
<button class="button" data-sort-by="category">category</button>
</div>
<pre class="code-display"><code>$grid.isotope({...})</code></pre>
<div class="grid">
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Mercury</h5>
<p class="symbol">Hg</p>
<p class="number">80</p>
<p class="weight">200.59</p>
</div>
<div class="element-item metalloid " data-category="metalloid">
<h5 class="name">Tellurium</h5>
<p class="symbol">Te</p>
<p class="number">52</p>
<p class="weight">127.6</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h5 class="name">Bismuth</h5>
<p class="symbol">Bi</p>
<p class="number">83</p>
<p class="weight">208.980</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h5 class="name">Lead</h5>
<p class="symbol">Pb</p>
<p class="number">82</p>
<p class="weight">207.2</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Gold</h5>
<p class="symbol">Au</p>
<p class="number">79</p>
<p class="weight">196.967</p>
</div>
<div class="element-item alkali metal " data-category="alkali">
<h5 class="name">Potassium</h5>
<p class="symbol">K</p>
<p class="number">19</p>
<p class="weight">39.0983</p>
</div>
<div class="element-item alkali metal " data-category="alkali">
<h5 class="name">Sodium</h5>
<p class="symbol">Na</p>
<p class="number">11</p>
<p class="weight">22.99</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Cadmium</h5>
<p class="symbol">Cd</p>
<p class="number">48</p>
<p class="weight">112.411</p>
</div>
<div class="element-item alkaline-earth metal " data-category="alkaline-earth">
<h5 class="name">Calcium</h5>
<p class="symbol">Ca</p>
<p class="number">20</p>
<p class="weight">40.078</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Rhenium</h5>
<p class="symbol">Re</p>
<p class="number">75</p>
<p class="weight">186.207</p>
</div>
<div class="element-item post-transition metal " data-category="post-transition">
<h5 class="name">Thallium</h5>
<p class="symbol">Tl</p>
<p class="number">81</p>
<p class="weight">204.383</p>
</div>
<div class="element-item metalloid " data-category="metalloid">
<h5 class="name">Antimony</h5>
<p class="symbol">Sb</p>
<p class="number">51</p>
<p class="weight">121.76</p>
</div>
<div class="element-item transition metal " data-category="transition">
<h5 class="name">Cobalt</h5>
<p class="symbol">Co</p>
<p class="number">27</p>
<p class="weight">58.933</p>
</div>
<div class="element-item lanthanoid metal inner-transition " data-category="lanthanoid">
<h5 class="name">Ytterbium</h5>
<p class="symbol">Yb</p>
<p class="number">70</p>
<p class="weight">173.054</p>
</div>
<div class="element-item noble-gas nonmetal " data-category="noble-gas">
<h5 class="name">Argon</h5>
<p class="symbol">Ar</p>
<p class="number">18</p>
<p class="weight">39.948</p>
</div>
<div class="element-item diatomic nonmetal " data-category="diatomic">
<h5 class="name">Nitrogen</h5>
<p class="symbol">N</p>
<p class="number">7</p>
<p class="weight">14.007</p>
</div>
<div class="element-item actinoid metal inner-transition " data-category="actinoid">
<h5 class="name">Uranium</h5>
<p class="symbol">U</p>
<p class="number">92</p>
<p class="weight">238.029</p>
</div>
<div class="element-item actinoid metal inner-transition " data-category="actinoid">
<h5 class="name">Plutonium</h5>
<p class="symbol">Pu</p>
<p class="number">94</p>
<p class="weight">(244)</p>
</div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/lzCqe">Edit this demo on CodePen</a>
</p>
</div>
<h2 id="html">HTML</h2>
<p>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.</p>
<pre><code class="html"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"element-item transition metal"</span> <span class="attribute">data-category</span>=<span class="value">"transition"</span>></span>
<span class="tag"><<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"number"</span>></span>79<span class="tag"></<span class="title">p</span>></span>
<span class="tag"><<span class="title">h3</span> <span class="attribute">class</span>=<span class="value">"symbol"</span>></span>Au<span class="tag"></<span class="title">h3</span>></span>
<span class="tag"><<span class="title">h2</span> <span class="attribute">class</span>=<span class="value">"name"</span>></span>Gold<span class="tag"></<span class="title">h2</span>></span>
<span class="tag"><<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"weight"</span>></span>196.966569<span class="tag"></<span class="title">p</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"element-item metalloid"</span> <span class="attribute">data-category</span>=<span class="value">"metalloid"</span>></span>
<span class="tag"><<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"number"</span>></span>51<span class="tag"></<span class="title">p</span>></span>
<span class="tag"><<span class="title">h3</span> <span class="attribute">class</span>=<span class="value">"symbol"</span>></span>Sb<span class="tag"></<span class="title">h3</span>></span>
<span class="tag"><<span class="title">h2</span> <span class="attribute">class</span>=<span class="value">"name"</span>></span>Antimony<span class="tag"></<span class="title">h2</span>></span>
<span class="tag"><<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"weight"</span>></span>121.76<span class="tag"></<span class="title">p</span>></span>
<span class="tag"></<span class="title">div</span>></span>
...
<span class="tag"></<span class="title">div</span>></span>
</code></pre>
<h2 id="getsortdata">getSortData</h2>
<p>Isotope reads data from HTML with the <code>getSortData</code> option. <code>getSortData</code> 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.</p>
<pre><code class="js"><span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">'.grid'</span>).isotope({
getSortData: {
name: <span class="string">'.name'</span>, <span class="comment">// text from querySelector</span>
category: <span class="string">'[data-category]'</span>, <span class="comment">// value of attribute</span>
weight: <span class="function"><span class="keyword">function</span><span class="params">( itemElem )</span> </span>{ <span class="comment">// function</span>
<span class="keyword">var</span> weight = $( itemElem ).find(<span class="string">'.weight'</span>).text();
<span class="keyword">return</span> <span class="built_in">parseFloat</span>( weight.replace( <span class="regexp">/[\(\)]/g</span>, <span class="string">''</span>) );
}
}
});
</code></pre>
<h3 id="getsortdata-strings">getSortData strings</h3>
<p>When a <code>getSortData</code> 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.</p>
<pre><code class="js">name: <span class="string">'.name'</span>, <span class="comment">// use text of .name element</span>
symbol: <span class="string">'.symbol'</span> <span class="comment">// use text of .symbol</span>
</code></pre>
<p>A string wrapped in brackets, like <code><span class="string">'[attribute]'</span></code>, will be used to get the value of an attribute.</p>
<pre><code class="js"><span class="comment">// use value of data-category attribute</span>
category: <span class="string">'[data-category]'</span>
</code></pre>
<p>Data values can be parsed into numbers by adding parser keywords to the shortcut string.</p>
<pre><code class="js"><span class="comment">// parse text of .number as an integer</span>
number: <span class="string">'.number parseInt'</span>,
<span class="comment">// parse text of .weight as a float</span>
weight: <span class="string">'.weight parseFloat'</span>
</code></pre>
<h3 id="getsortdata-functions">getSortData functions</h3>
<p><code>getSortData</code> values can be set to a function. This function is used on each item element to get data. The function provides one parameter <code>itemElem</code>, which is the item element. The function needs to return the data point.</p>
<pre><code class="js">weight: <span class="function"><span class="keyword">function</span><span class="params">( itemElem )</span> </span>{
<span class="comment">// get text of .weight element</span>
<span class="keyword">var</span> weight = $( itemElem ).find(<span class="string">'.weight'</span>).text();
<span class="comment">// replace parens (), and parse as float</span>
<span class="keyword">return</span> <span class="built_in">parseFloat</span>( weight.replace( <span class="regexp">/[\(\)]/g</span>, <span class="string">''</span>) );
}
</code></pre>
<h2 id="sortby">sortBy</h2>
<p>For every property set in <code>getSortData</code>, Isotope can use it for sorting with the <code>sortBy</code> option. The value of <code>sortBy</code> needs to match a key in <code>getSortData</code>. With the properties above, <code>sortBy</code> can be set to
<code><span class="string">'name'</span></code>,
<code><span class="string">'symbol'</span></code>,
<code><span class="string">'number'</span></code>,
<code><span class="string">'weight'</span></code>, and
<code><span class="string">'category'</span></code>.
</p>
<pre><code class="js"><span class="jquery_var">$grid</span>.isotope({ sortBy : <span class="string">'symbol'</span> });
</code></pre>
<p>Two additional <code>sortBy</code> options are built in.</p>
<pre><code class="js"><span class="jquery_var">$grid</span>.isotope({ sortBy : <span class="string">'original-order'</span> });
<span class="comment">// original order of the item elements</span>
<span class="jquery_var">$grid</span>.isotope({ sortBy : <span class="string">'random'</span> });
<span class="comment">// random order</span>
</code></pre>
<h3 id="multiple-sortby">Multiple sortBy</h3>
<p>To sort by multiple properties, you can set <code>sortBy</code> to an array. For example, <code>sortBy: [ <span class="string">'color'</span>, <span class="string">'number'</span> ]</code> will sort items by color, <em>then</em> by number.</p>
<div class="duo example go-wide">
<div class="duo__cell example__code">
<pre><code class="html"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid"</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid-item"</span> <span class="attribute">data-color</span>=<span class="value">"yellow"</span>></span>
<span class="tag"><<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"number"</span>></span>3<span class="tag"></<span class="title">p</span>></span>
<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"grid-item"</span> <span class="attribute">data-color</span>=<span class="value">"blue"</span>></span>
<span class="tag"><<span class="title">p</span> <span class="attribute">class</span>=<span class="value">"number"</span>></span>2<span class="tag"></<span class="title">p</span>></span>
<span class="tag"></<span class="title">div</span>></span>
...
<span class="tag"></<span class="title">div</span>></span>
</code></pre>
<pre><code class="js"><span class="keyword">var</span> <span class="jquery_var">$grid</span> = $(<span class="string">'.grid'</span>).isotope({
getSortData: {
color: <span class="string">'[data-color]'</span>,
number: <span class="string">'.number parseInt'</span>
},
<span class="comment">// sort by color then number</span>
sortBy: [ <span class="string">'color'</span>, <span class="string">'number'</span> ]
});
</code></pre>
</div>
<div class="duo__cell example__demo" data-js-module="multiple-sort-by">
<div class="button-group js-radio-button-group">
<button class="button is-checked" data-sort-by="color,number">color, number</button>
<button class="button" data-sort-by="number,color">number, color</button>
</div>
<div class="grid">
<div class="grid-multi-item" data-color="yellow">
<p class="number">3</p>
</div>
<div class="grid-multi-item" data-color="blue">
<p class="number">2</p>
</div>
<div class="grid-multi-item" data-color="blue">
<p class="number">1</p>
</div>
<div class="grid-multi-item" data-color="yellow">
<p class="number">1</p>
</div>
<div class="grid-multi-item" data-color="yellow">
<p class="number">2</p>
</div>
<div class="grid-multi-item" data-color="blue">
<p class="number">3</p>
</div>
<div class="grid-multi-item" data-color="yellow">
<p class="number">2</p>
</div>
<div class="grid-multi-item" data-color="red">
<p class="number">2</p>
</div>
<div class="grid-multi-item" data-color="red">
<p class="number">3</p>
</div>
</div>
<p class="edit-demo">
<a href="http://codepen.io/desandro/pen/sxAJL">Edit this demo on CodePen</a>
</p>
</div>
</div>
<h2 id="sortascending">sortAscending</h2>
<p>By default, Isotope sorts ascendingly: A, B, C and 1, 2, 3. To sort descendingly Z, Y, X, and 9, 8, 7, set <code>sortAscending: <span class="literal">false</span></code>.</p>
<pre><code class="js"><span class="comment">// sort highest number first</span>
<span class="jquery_var">$grid</span>.isotope({
sortBy: <span class="string">'number'</span>,
sortAscending: <span class="literal">false</span>
});
</code></pre>
<p><code>sortAscending</code> can also be set with an object, so that you can set ascending order for each <code>sortBy</code> value.</p>
<pre><code class="js"><span class="jquery_var">$grid</span>.isotope({
sortAscending: {
name: <span class="literal">true</span>,
weight: <span class="literal">false</span>,
category: <span class="literal">true</span>,
number: <span class="literal">false</span>
}
});
</code></pre>
<h2 id="updatesortdata">updateSortData</h2>
<p>To update sort data after a change has been made to item elements, use the <a href="methods.html#updatesortdata"><code>updateSortData</code> method</a>.</p>
<pre><code class="js"><span class="jquery_var">$grid</span>.isotope(<span class="string">'updateSortData'</span>).isotope();
</code></pre>
<h2 id="ui">UI</h2>
<p>Let’s use a group of buttons for the UI.</p>
<pre><code class="html"><span class="tag"><<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"button-group sort-by-button-group"</span>></span>
<span class="tag"><<span class="title">button</span> <span class="attribute">data-sort-by</span>=<span class="value">"original-order"</span>></span>original order<span class="tag"></<span class="title">button</span>></span>
<span class="tag"><<span class="title">button</span> <span class="attribute">data-sort-by</span>=<span class="value">"name"</span>></span>name<span class="tag"></<span class="title">button</span>></span>
<span class="tag"><<span class="title">button</span> <span class="attribute">data-sort-by</span>=<span class="value">"symbol"</span>></span>symbol<span class="tag"></<span class="title">button</span>></span>
<span class="tag"><<span class="title">button</span> <span class="attribute">data-sort-by</span>=<span class="value">"number"</span>></span>number<span class="tag"></<span class="title">button</span>></span>
<span class="tag"><<span class="title">button</span> <span class="attribute">data-sort-by</span>=<span class="value">"weight"</span>></span>weight<span class="tag"></<span class="title">button</span>></span>
<span class="tag"><<span class="title">button</span> <span class="attribute">data-sort-by</span>=<span class="value">"category"</span>></span>category<span class="tag"></<span class="title">button</span>></span>
<span class="tag"></<span class="title">div</span>></span>
</code></pre>
<p>Each button has its <code>sortBy</code> value set in the <code>data-sort-by</code> attribute. In the JS, we can use that value when a button is clicked.</p>
<pre><code class="js"><span class="comment">// init Isotope</span>
<span class="keyword">var</span> <span class="jquery_var">$grid</span> = <span class="jquery_var">$grid</span>.isotope({
getSortData: {
name: <span class="string">'.name'</span>,
symbol: <span class="string">'.symbol'</span>,
number: <span class="string">'.number parseInt'</span>,
category: <span class="string">'[data-category]'</span>,
weight: <span class="function"><span class="keyword">function</span><span class="params">( itemElem )</span> </span>{
<span class="keyword">var</span> weight = $( itemElem ).find(<span class="string">'.weight'</span>).text();
<span class="keyword">return</span> <span class="built_in">parseFloat</span>( weight.replace( <span class="regexp">/[\(\)]/g</span>, <span class="string">''</span>) );
}
}
});
<span class="comment">// sort items on button click</span>
$(<span class="string">'.sort-by-button-group'</span>).on( <span class="string">'click'</span>, <span class="string">'button'</span>, <span class="function"><span class="keyword">function</span><span class="params">()</span> </span>{
<span class="keyword">var</span> sortByValue = $(<span class="keyword">this</span>).attr(<span class="string">'data-sort-by'</span>);
<span class="jquery_var">$grid</span>.isotope({ sortBy: sortByValue });
});
</code></pre>
</div>
</div>
<div class="site-footer">
<div class="primary-content">
<p class="footer-copy">Follow <a href="https://twitter.com/metafizzyco">@metafizzyco on Twitter for Isotope updates</a></p>
</div>
<div class="site-footer__brand">
<a class="site-footer__brand__logo" href="http://metafizzy.co">M<span class="etafizzy">etafizzy</span></a>
<span class="site-footer__brand__copyright">© 2011–2015</span>
</div>
</div>
<!-- Looking for isotope.js? Use isotope.pkgd.min.js -->
<!-- Isotope does NOT require jQuery. But it does make things easier -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/jquery.min.js"><\/script>')</script>
<script src="js/isotope-docs.min.js"></script>
<!-- Google Analytics - Remove this if you copy/pasted this page -->
<script>
// Google Analytics
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-58739927-3','auto');ga('send','pageview');
</script>
</body>
</html>