jQuery: Cool Filters for SharePoint List


Sorry for not posting anything for almost a year. So many good ideas died inside my brain and thought now I should again start posting something (good or bad). This time I came up with enhance filter to achieve multi-level filtering of a SharePoint List View web part. Although the default list view comes up with a search box that is very handy the only limitation being that you can do filtering only at one level. The default search box can look at multiple columns but only one search at a time.

Our Custom jQuery filter – some screen shot.

This is what I have come up with, although it needs more work to make it more dynamic…the current version does the basic job of multilevel filtering.

Below is the screen capture of the filter user interface. Much of the credit goes to jQuery-Chosen plugin to make it look so awesome. Thanks a lot Patrick Filler and Team for coming up with this wonderful plugin.

Alright enough of show-off for now, let me dig onto the code and other details.

Solution Files

This solution consists for 5-files. 4 of them related with jQuery:Choosen plugin and 1 for my poor script J

  1. css/choosen.css
  2. css/prism.css
  3. js/prism.js
  4. js/choosen.jquery.min.js
  5. filter-UI.html : Contains the filtering logic and reference to all the above file.

All the source files could be downloaded from GitHub – SudhirKe à splist-filter repository.

Definitely we will need to have reference for jQuery library, I think by this time all browsers should decide to load jQuery for every page I am so much in love with this.

Script References:

First step is to upload the source file onto Site Assets (or any other library) and add the references to CSS and JS files.


HTML Code for filter is very easy, you just add drop down with filter options and another button for clearing the filters.

TODO: A much nicer version would be to pull all the available values based on the list columns, however that will require some more configuration on to the drop downs J

jQuery Script – The Magic

Filter Function

With SharePoint 2013 list views, every data row has a class called .ms-itemhover, this makes our job very easy since we can just look for the selected value in every row and hide everything else.

Here is how my generic filter function looks like, notice that I am passing the value to my hide and show functions, this will hide the rows really slow and makes it look fancy.

Drop down Modification and filtering the records

In this code I am converting my simple drop downs onto more fancy choosen drop down and handling the change event for them. Notice that I am just calling the filter function to do the magic. Same code exists for my other filter drop down.

Reset the filters

Last part of this code is to clear all the filters. This will also clear the previous values from the drop down and show all rows (.ms-itemhover).

Source Code:

Here is all the source code together for reference, same could be downloaded from the link given in solution files.

Putting the code on your SharePoint:

This is the easiest part of all the scripting, below are the steps for you (kind of checklist).

  1. Download all the codes from GitHub – SudhirKe à splist-filter repository.
  2. Upload all the files to Site Assets (or any other library) in your SharePoint site.
  3. Add a list view web part onto your page (or use a page where it is already added).
  4. Edit the page and add a content editor web part.
  5. Update content editor web part and change the source link to point to filter-ui.html (e.g. http://yoursp/sites/yoursite/SiteAssets/filter-ui.html

If everything is done correctly here is how your filter page should look like ( I have added the generic Task list for this example).

Selecting Priority “High” should filter the rows for me.

Further selecting Status “In Progress” will hide the other rows and display only one row.

Clicking on “Reset Filters” button will make all the rows visible again.

Hope this helps someone in need. Feel free to leave comments on this blog. Once again many thanks to jQuery Chosen plugin mastermind Patrick Filler and team.


29 thoughts on “jQuery: Cool Filters for SharePoint List

  1. Hey, great work this is exactly what I was looking for. Nitin, I can confirm this work on SharePoint 2010.

    Can I limit certain search bar to certain column? I cant seem to work it out. Thanks again.


  2. How do we use this for different columns? I have a column with the display name: WebDivNm and want to filter on that instead of Status. Where do we define the column to be filtered? Thank you so much!

    • you will have to come up with an updated version of filterLIst() function that looks only for the specific column. You will have to keep the WebDivNm column at fixed place (first column) and then use jQuery to look only for the first occurrence within the row.

  3. Hi Sudhir, I was able to execute the script. But I noticed that whenever I change the filters, it doesn’t seem to refresh the previous selection, thus displaying an empty view. Why is that? Did I miss something?

  4. Hi Sudhir,
    Really nice post… Good job !
    I can use it but I don’t understand some parts of the process.
    So, can you explain what I have to change if I want to display all letters of the alphabet (in linkable DIV for example) and when I click on a letter, filter the list where the “name” starts with this letter ?
    Thanks a lot for your answer.

  5. Hi Sudhir,
    This works great when you have just one list or library on the homepage. Whereas in my case, I have three libraries on my home page as web parts. How can I target just one list here?


  6. Hello Sudhir,

    This post looks really good, but the filter is not getting applied when we go to next page (Pagination), Can you suggest some solution for this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s