bachir
/
popsu-d7


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
							<!doctype html>
<html lang="en">
<head>
  
  <meta charset="utf-8" />
  <title>Sorting &middot; Isotope Docs</title>
  
  <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  
  <link rel="stylesheet" href="../css/style.css" />
  
  <!-- scripts at bottom of page -->

</head>
<body class="docs ">
  
  <nav id="site-nav">
    <h1><a href="../index.html">Isotope</a></h1>

    <h2>Docs</h2>
    
    <ul>
      
        
          <li><a href="../docs/introduction.html">Introduction</a>
        
      
        
          <li><a href="../docs/options.html">Options</a>
        
      
        
          <li><a href="../docs/methods.html">Methods</a>
        
      
        
          <li><a href="../docs/layout-modes.html">Layout modes</a>
        
      
        
          <li><a href="../docs/filtering.html">Filtering</a>
        
      
        
        <li class="current"><a href="#content">Sorting</a>
          <ul class="toc">
            
              <li><a href="#markup">Markup</a></li>
            
              <li><a href="#getsortdata_option">getSortData option</a></li>
            
              <li><a href="#sortby_option">sortBy option</a></li>
            
              <li><a href="#sortascending_option">sortAscending option</a></li>
            
              <li><a href="#creating_interactive_buttons">Creating interactive buttons</a></li>
            
          </ul>
        </li>
        
      
        
          <li><a href="../docs/animating.html">Animating</a>
        
      
        
          <li><a href="../docs/adding-items.html">Adding items</a>
        
      
        
          <li><a href="../docs/extending-isotope.html">Extending Isotope</a>
        
      
        
          <li><a href="../docs/hash-history-jquery-bbq.html">Hash history with jQuery BBQ</a>
        
      
        
          <li><a href="../docs/help.html">Help</a>
        
      
        
          <li><a href="../docs/license.html">License</a>
        
      
    </ul>
    
    <h2>Demos</h2>
    
    <ul>
      
        
          <li><a href="../demos/basic.html">Basic</a>
        
      
        
          <li><a href="../demos/elements-complete.html">Elements Complete</a>
        
      
        
          <li><a href="../demos/elements-partial.html">Elements Partial</a>
        
      
        
          <li><a href="../demos/layout-modes.html">Layout modes</a>
        
      
        
          <li><a href="../demos/filtering.html">Filtering</a>
        
      
        
          <li><a href="../demos/sorting.html">Sorting</a>
        
      
        
          <li><a href="../demos/relayout.html">reLayout</a>
        
      
        
          <li><a href="../demos/adding-items.html">Adding items</a>
        
      
        
          <li><a href="../demos/infinite-scroll.html">Infinite Scroll</a>
        
      
        
          <li><a href="../demos/images.html">Images</a>
        
      
        
          <li><a href="../demos/combination-filters.html">Combination filters</a>
        
      
        
          <li><a href="../demos/hash-history.html">Hash history</a>
        
      
        
          <li><a href="../demos/fluid-responsive.html">Fluid / responsive</a>
        
      
    </ul>
    
    <h2>Custom layout modes</h2>
    
    <ul>
      
        
          <li><a href="../custom-layout-modes/centered-masonry.html">Centered Masonry</a>
        
      
        
          <li><a href="../custom-layout-modes/category-rows.html">Category rows</a>
        
      
        
          <li><a href="../custom-layout-modes/masonry-corner-stamp.html">Masonry corner stamp</a>
        
      
        
          <li><a href="../custom-layout-modes/masonry-gutters.html">Masonry gutters</a>
        
      
        
          <li><a href="../custom-layout-modes/spine-align.html">Spine align</a>
        
      
    </ul>
    
    <h2><a href="../tests/index.html">Tests</a></h2>
    
  </nav> <!-- #site-nav -->
  
  <section id="content">
    
      <h1>Sorting</h1>
    

    <p>Collect data from item element and rearrange their order in the layout with sorting.</p>

<p><a href='../demos/sorting.html'><strong>See Demo: Sorting</strong></a></p>

<h2 id='markup'>Markup</h2>

<p>Any group of similar items have their own data. It could be a text value, like a title or tag, or a numerical value, like a measurement or grade. For our example, each item element has several data points that can be used for sorting. There&#8217;s the elemental symbol, number, name of the element, weight, and category.</p>
<div class='highlight'><pre><code class='html'><span class='nt'>&lt;div</span> <span class='na'>id=</span><span class='s'>&quot;container&quot;</span><span class='nt'>&gt;</span>
  <span class='nt'>&lt;div</span> <span class='na'>class=</span><span class='s'>&quot;element transition metal&quot;</span> <span class='na'>data-category=</span><span class='s'>&quot;transition&quot;</span><span class='nt'>&gt;</span> 
    <span class='nt'>&lt;p</span> <span class='na'>class=</span><span class='s'>&quot;number&quot;</span><span class='nt'>&gt;</span>79<span class='nt'>&lt;/p&gt;</span> 
    <span class='nt'>&lt;h3</span> <span class='na'>class=</span><span class='s'>&quot;symbol&quot;</span><span class='nt'>&gt;</span>Au<span class='nt'>&lt;/h3&gt;</span> 
    <span class='nt'>&lt;h2</span> <span class='na'>class=</span><span class='s'>&quot;name&quot;</span><span class='nt'>&gt;</span>Gold<span class='nt'>&lt;/h2&gt;</span> 
    <span class='nt'>&lt;p</span> <span class='na'>class=</span><span class='s'>&quot;weight&quot;</span><span class='nt'>&gt;</span>196.966569<span class='nt'>&lt;/p&gt;</span> 
  <span class='nt'>&lt;/div&gt;</span> 
    
  <span class='nt'>&lt;div</span> <span class='na'>class=</span><span class='s'>&quot;element metalloid&quot;</span> <span class='na'>data-category=</span><span class='s'>&quot;metalloid&quot;</span><span class='nt'>&gt;</span> 
    <span class='nt'>&lt;p</span> <span class='na'>class=</span><span class='s'>&quot;number&quot;</span><span class='nt'>&gt;</span>51<span class='nt'>&lt;/p&gt;</span> 
    <span class='nt'>&lt;h3</span> <span class='na'>class=</span><span class='s'>&quot;symbol&quot;</span><span class='nt'>&gt;</span>Sb<span class='nt'>&lt;/h3&gt;</span> 
    <span class='nt'>&lt;h2</span> <span class='na'>class=</span><span class='s'>&quot;name&quot;</span><span class='nt'>&gt;</span>Antimony<span class='nt'>&lt;/h2&gt;</span> 
    <span class='nt'>&lt;p</span> <span class='na'>class=</span><span class='s'>&quot;weight&quot;</span><span class='nt'>&gt;</span>121.76<span class='nt'>&lt;/p&gt;</span> 
  <span class='nt'>&lt;/div&gt;</span>
<span class='nt'>&lt;/div&gt;</span>
</code></pre>
</div>
<h2 id='getsortdata_option'>getSortData option</h2>

<p>In order to extract this data from the element, we need to pass in a function to get it via the <a href='options.html#getsortdata'><code>getSortData</code></a> option. This option accepts an object, whose values are the functions to extract the data.</p>

<p>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.</p>

<p>In the example above, to get element name, we would need to get the text from the <code>.name</code> element. The same works for symbol.</p>
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>&#39;#container&#39;</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span>
  <span class='nx'>getSortData</span> <span class='o'>:</span> <span class='p'>{</span>
    <span class='nx'>name</span> <span class='o'>:</span> <span class='kd'>function</span> <span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
      <span class='k'>return</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>find</span><span class='p'>(</span><span class='s1'>&#39;.name&#39;</span><span class='p'>).</span><span class='nx'>text</span><span class='p'>();</span>
    <span class='p'>},</span>
    <span class='nx'>symbol</span> <span class='o'>:</span> <span class='kd'>function</span> <span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
      <span class='k'>return</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>find</span><span class='p'>(</span><span class='s1'>&#39;.symbol&#39;</span><span class='p'>).</span><span class='nx'>text</span><span class='p'>();</span>
    <span class='p'>}</span>
  <span class='p'>}</span>
<span class='p'>});</span>
</code></pre>
</div>
<p>For numerical data, we can convert a text value into a number with <code>parseInt()</code> or <code>parseFloat()</code>.</p>
<div class='highlight'><pre><code class='javascript'><span class='nx'>getSortData</span> <span class='o'>:</span> <span class='p'>{</span>
  <span class='c1'>// ...</span>
  <span class='nx'>number</span> <span class='o'>:</span> <span class='kd'>function</span> <span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
    <span class='k'>return</span> <span class='nb'>parseInt</span><span class='p'>(</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>find</span><span class='p'>(</span><span class='s1'>&#39;.name&#39;</span><span class='p'>).</span><span class='nx'>text</span><span class='p'>(),</span> <span class='mi'>10</span> <span class='p'>);</span>
  <span class='p'>},</span>
  <span class='nx'>weight</span> <span class='o'>:</span> <span class='kd'>function</span> <span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
    <span class='k'>return</span> <span class='nb'>parseFloat</span><span class='p'>(</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>find</span><span class='p'>(</span><span class='s1'>&#39;.weight&#39;</span><span class='p'>).</span><span class='nx'>text</span><span class='p'>()</span> <span class='p'>);</span>
  <span class='p'>}</span>
<span class='p'>}</span>
</code></pre>
</div>
<p>The data extracted can be anything accessible in the item element via jQuery. To extract the category data held within the <code>data-category</code> attribute, we can use the <code>.attr()</code>.</p>
<div class='highlight'><pre><code class='javascript'><span class='nx'>getSortData</span> <span class='o'>:</span> <span class='p'>{</span>
  <span class='c1'>// ...</span>
  <span class='nx'>category</span> <span class='o'>:</span> <span class='kd'>function</span> <span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
    <span class='k'>return</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>attr</span><span class='p'>(</span><span class='s1'>&#39;data-category&#39;</span><span class='p'>);</span>
  <span class='p'>}</span>
<span class='p'>}</span>
</code></pre>
</div>
<p>Get creative! You could sort a list by the width of each item element.</p>
<div class='highlight'><pre><code class='javascript'><span class='nx'>getSortData</span> <span class='o'>:</span> <span class='p'>{</span>
  <span class='c1'>// ...</span>
  <span class='nx'>width</span> <span class='o'>:</span> <span class='kd'>function</span><span class='p'>(</span> <span class='nx'>$elem</span> <span class='p'>)</span> <span class='p'>{</span>
    <span class='k'>return</span> <span class='nx'>$elem</span><span class='p'>.</span><span class='nx'>width</span><span class='p'>();</span>
  <span class='p'>}</span>
<span class='p'>}</span>
</code></pre>
</div>
<h2 id='sortby_option'>sortBy option</h2>

<p>For every method set in <code>getSortData</code>, Isotope uses that method to build the data for sorting. The data cache is built on initialization so it can be quickly accessed when sorting. With the methods above, we have built data for an item elements name, symbol, number, weight and category.</p>

<p>Sorting elements is done with the <a href='options.html#sortby'><code>sortBy</code> option</a>. The value needs to match the property name used in the <code>getSortData</code> object.</p>

<p>With our example, we can use <code>&#39;name&#39;</code>, <code>&#39;symbol&#39;</code>, <code>&#39;number&#39;</code>, <code>&#39;weight&#39;</code> and <code>&#39;category&#39;</code>.</p>
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>&#39;#container&#39;</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span> <span class='nx'>sortBy</span> <span class='o'>:</span> <span class='s1'>&#39;symbol&#39;</span> <span class='p'>});</span>
</code></pre>
</div>
<p>There are two additional sorting data methods built in to Isotope.</p>

<ul>
<li><code>&#39;original-order&#39;</code> will use the original order of the item elements to arrange them in the layout.</li>

<li><code>&#39;random&#39;</code> is a random order.</li>
</ul>

<h2 id='sortascending_option'>sortAscending option</h2>

<p>By default, Isotope sorts data in ascension. If our data for name is &#8220;Gold, Antimony, Lead, Iron, Silver&#8221;, when sorted by name, the elements will be ordered ABC.. : &#8220;Antimony, Gold, Iron, Lead, Silver.&#8221; To reverse the order and sort data in descension, set <a href='options.html#sortascending'><code>sortAscending</code></a> to <code><span class='kc'>false</span></code>.</p>
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>&#39;#container&#39;</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span> 
  <span class='nx'>sortBy</span> <span class='o'>:</span> <span class='s1'>&#39;name&#39;</span><span class='p'>,</span>
  <span class='nx'>sortAscending</span> <span class='o'>:</span> <span class='kc'>false</span>
<span class='p'>});</span>
</code></pre>
</div>
<h2 id='creating_interactive_buttons'>Creating interactive buttons</h2>

<p>We can use a simple list for our buttons.</p>
<div class='highlight'><pre><code class='html'><span class='nt'>&lt;ul</span> <span class='na'>id=</span><span class='s'>&quot;sort-by&quot;</span><span class='nt'>&gt;</span>
  <span class='nt'>&lt;li&gt;&lt;a</span> <span class='na'>href=</span><span class='s'>&quot;#name&quot;</span><span class='nt'>&gt;</span>name<span class='nt'>&lt;/a&gt;&lt;/li&gt;</span>
  <span class='nt'>&lt;li&gt;&lt;a</span> <span class='na'>href=</span><span class='s'>&quot;#symbol&quot;</span><span class='nt'>&gt;</span>symbol<span class='nt'>&lt;/a&gt;&lt;/li&gt;</span>
  <span class='nt'>&lt;li&gt;&lt;a</span> <span class='na'>href=</span><span class='s'>&quot;#number&quot;</span><span class='nt'>&gt;</span>number<span class='nt'>&lt;/a&gt;&lt;/li&gt;</span>
  <span class='nt'>&lt;li&gt;&lt;a</span> <span class='na'>href=</span><span class='s'>&quot;#weight&quot;</span><span class='nt'>&gt;</span>weight<span class='nt'>&lt;/a&gt;&lt;/li&gt;</span>
  <span class='nt'>&lt;li&gt;&lt;a</span> <span class='na'>href=</span><span class='s'>&quot;#category&quot;</span><span class='nt'>&gt;</span>category<span class='nt'>&lt;/a&gt;&lt;/li&gt;</span>
<span class='nt'>&lt;/ul&gt;</span>
</code></pre>
</div>
<p>When one of these links is clicked, we can use the <code>href</code> attribute as the value for <code>sortBy</code> in the Isotope script.</p>
<div class='highlight'><pre><code class='javascript'><span class='nx'>$</span><span class='p'>(</span><span class='s1'>&#39;#sort-by a&#39;</span><span class='p'>).</span><span class='nx'>click</span><span class='p'>(</span><span class='kd'>function</span><span class='p'>(){</span>
  <span class='c1'>// get href attribute, minus the &#39;#&#39;</span>
  <span class='kd'>var</span> <span class='nx'>sortName</span> <span class='o'>=</span> <span class='nx'>$</span><span class='p'>(</span><span class='k'>this</span><span class='p'>).</span><span class='nx'>attr</span><span class='p'>(</span><span class='s1'>&#39;href&#39;</span><span class='p'>).</span><span class='nx'>slice</span><span class='p'>(</span><span class='mi'>1</span><span class='p'>);</span>
  <span class='nx'>$</span><span class='p'>(</span><span class='s1'>&#39;#container&#39;</span><span class='p'>).</span><span class='nx'>isotope</span><span class='p'>({</span> <span class='nx'>sortBy</span> <span class='o'>:</span> <span class='nx'>sortName</span> <span class='p'>});</span>
  <span class='k'>return</span> <span class='kc'>false</span><span class='p'>;</span>
<span class='p'>});</span>
</code></pre>
</div>
    
    <footer>
      Isotope by <a href="http://desandro.com">David DeSandro</a> / <a href="http://metafizzy.co">Metafizzy</a>
    </footer>
    
  </section> <!-- #content -->
  

</body>
</html>