Click here to Skip to main content
13,007,028 members (59,180 online)
Click here to Skip to main content
Add your own
alternative version


4 bookmarked
Posted 9 May 2014

Portfolio Filtering/Grouping

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


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?


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>

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:

<input type="checkbox" name="category5" value="" 

filterValue="TeamPlayer" data-filterName="Category" />
<label for="category5">Team player</label>

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
      //remove the last extra comma(,)
        //if anything is selected at all
      var $resultSet=$itemsClone.find($currentFilter);
          { duration: 1000 },
        }// else show all the elements
      else {
      var $resetFilters = $itemsClone.find('li');
          { duration: 1000 },

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.



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


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


About the Author

Purbasha Ghosh
Software Developer (Senior)
India India
Hi, I am Purbasha and I have been into web development, clean code promotion and benchmarking new Azure offerings since quite a while now. I am here to share my learnings and solutions/hacks that I keep collecting with my experience.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
fredatcodeproject12-May-14 10:53
memberfredatcodeproject12-May-14 10:53 

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

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

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170628.1 | Last Updated 9 May 2014
Article Copyright 2014 by Purbasha Ghosh
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid