Click here to Skip to main content
Click here to Skip to main content
Go to top

Portfolio Filtering/Grouping

, 9 May 2014
Rate this:
Please Sign up or sign in to vote.
Portfolio filtering/grouping

Introduction

Recently, I came across a requirement to develop a portfolio filtering/grouping system. Something like a job portal where a recruiter can see different portfolios which match various permutations and combinations of skill sets. With two days of searching and combing through every link that Google search would return, I either ended up with paid versions of jQuery libraries (where we do not have much control over the filtering features) or poorly documented open source versions (which need time to decipher). My common sense struck me late, but I came up with an easy solution using HTML 5 and jQuery and the best part of building something from scratch is the kind of control that you can exercise on it. Isn't it?

Background

Basically any such feature of filtering is about arranging and re-arranging the HTML elements containing the portfolio previews based on the given criteria. I am sure most of you reading this tip will be aware of the dataset API of HTML 5. That's more than enough to understand the solution attached with this tip.

Using the Code

In this arrangement, we store different attributes/skills/characteristics of a portfolio as data-* attributes of the respective element and read those attribute values to re-arrange the result set.

For instance, I am showing each employee's portfolio preview in a list element, and storing his/her skill set and proficiency in data-* attributes like this:

<li data-category="TeamPlayer" 
data-JobName="Executive" data-Function="Trainer" 
data-Score=4 data-id="id-4" class="span3">
 <a href="#"  id="emp1"><img class="thumbnail" 
 src="images/1.jpg" alt=""></a>
</li> 

This way, when I use the HTML 5 dataset API to get all the qualities of an employee, I get it in a JSON object like this:

var empObj=$('li').dataset;
{ category='TeamPlayer', JobName='Executive', Function='Trainer', Score='4'}  

We engineer the filter elements to carry the category and values like this:

<li>
<input type="checkbox" name="category5" value="" 
filterValue="TeamPlayer" data-filterName="Category" />
<label for="category5">Team player</label>
</li>

And on click of this filter checkbox, we clone all the elements on page that have "Teamplayer" as their "Category".

$("input:checkbox").click(function(e) {  
    
      var $currentFilter="";
    //pick all checked filters
      $('input:checked').each(function () {     // pick all the emps where filtername and value match 
        $currentFilter=$currentFilter + 'li[data-'+$(this).attr
        ('data-filterName')+'='+$(this).attr('filterValue')+'],';      
      });
      //remove the last extra comma(,)
      $currentFilter=$currentFilter.substr(0,$currentFilter.length-1);
        //if anything is selected at all
      if($currentFilter.length>1){
      var $resultSet=$itemsClone.find($currentFilter);
        $itemsHolder.quicksand(
          $resultSet,
          { duration: 1000 },
          gallery
          );
        }// else show all the elements
      else {
      var $resetFilters = $itemsClone.find('li');
          $itemsHolder.quicksand(
          $resetFilters,
          { duration: 1000 },
          gallery
          );         
         }      
    });     

Points of Interest

  1. $(selector).clone() is a very efficient way to deep copy HTML elements and modify them keeping the original version as it is before re-inserting them.
  2. dataset API by HTML5 is very clean and worth exploring to save custom data with the elements that they belong to.
  3. Also, it's worth mentioning $(selector).detach() in case we need to actually remove large number of elements from DOM rather than cloning and keeping the original as well.

Screenshots

Credits

The re-arranging effect in the demo is borrowed from quickSand jQuery library and the slider is from noUISlider.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Purbasha Ghosh
Software Developer (Senior)
India India
Hi, I am Purbasha and I have been into web development since 5 yrs now, mostly exploiting Microsoft technologies. I love writing, and hope to be a voracious blogger Smile | :) , although struggling to squeeze out time right now.
Follow on   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 Pinmemberfredatcodeproject12-May-14 10:53 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.140905.1 | Last Updated 9 May 2014
Article Copyright 2014 by Purbasha Ghosh
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid