Geeks With Blogs

News





The SharePoint Hillbilly Fewer Big Words... More Pretty Pictures...

Hey! A jQuery & SharePoint blog post that doesn’t involve SPServices! (sorry Marc)

A buddy of mine set up a SharePoint 2010 site for me (http://mrackley.me) so now you guys can take some of my solutions for a test run.  Woo Hoo! Thanks kind friend, who I haven’t named because I don’t want him getting flooded with requests for 2010 sites.  Smile

So, what to blog about? Let’s start off with something simple that can add a quick “ooh” factor for your users. Don’t you like the way dynamic filters work with jQuery? How you can start typing on what you want to filter on and the data filters immediately with no post-backs? Wouldn’t you like to add that same functionality easily to your SharePoint List Views and Data Views?? You wouldn’t? Oh.. sorry.. I really thought you might… hmm.. oh well.. never mind then…

The Solution

So, what we are going to do is add a short jQuery script on our page. This script will read the text in a text box and then filter all the rows in a list view and only show those rows that contain text that’s in the text box. To be more exact the script will:

  1. Find the specific table we want to filter (don’t filter on EVERY row on the page, that would hurt performance).
  2. Iterate through each row in that table.
  3. Strip off the html tags (we don’t want those affecting our search results, and the speed of the string search)
  4. Search the remaining text to see if the text in the filter box exists in what’s left
  5. Hide/Show rows accordingly

The Limitations

So, this solution does have several limitations you should be aware of.  It’s not a silver bullet (is anything??) but it does make you views a little more usable.  Those limitations include:

  • The filter only filters data currently in the view.  If you have paging turned on, the filter will not display anything that would exist on different pages.
  • The filter as implemented is case sensitive, you might want to turn it off. However, keep in mind every calculation you perform will impact performance.
  • The filter as implemented searches for any matching text on a row. It is NOT just checking one column, if any text on a row matches the text, that row displays. You may like that, you may not. You could make it search specific cells only, but again, this will impact performance.

There could be a million ways to improve on this script, I just wanted to show you something quick and simple (see blog title)

The Script

Now, the following script uses the default classes on the table and the rows when you add a List view from either SharePoint or SPD.  If you tweak the classes on these views to format them, be sure to tweak the script accordingly. So, if you had your jQuery library in the same location as this script, and did not modify any of the default information for you list view, you could conceivably drop this script in a Content Editor Web Part and be ready to go (another reason I like jQuery). Of course, the fewer rows you have on the screen, the faster it will filter. The two demos I set up have 250 rows each.

You can see this script in action for a list view created in SharePoint HERE.

You can see this script in action for a list view created in SharePoint Designer HERE.





"mainDiv">
class='Filter' width='125px'>Search: "Text" id="filterInput" >

Conclusion

So, yeah, nothing spectacular. I’m trying to give you guys some foundation here to build on. Hopefully you can find something useful. If you know of a better way, please tell us all. I’ve said it before and I’ll say it again. I’m not a jQuery developer, I’m a hack… always have been.. always will be.

OH.. and one more thing. If you haven’t already please VOTE for my Mix11 session.. Smile yes, I’ll keep nagging until Feb 4th… this blogging thing has got to have some perks? right?

Posted on Wednesday, January 26, 2011 9:32 PM | Back to top


Comments on this post: SharePoint List Views –Quick & Easy jQuery Filter

# Mr
Requesting Gravatar...
Man, I'm gettin' no love.

Jaap Vossers published a slightly more sophisticated version of this which I've used variations of several times for clients. It handles the case matching issue and a couple of other things pretty well. Check it out at http://instantlistfilter.codeplex.com/

M.
Left by Marc Anderson on Jan 27, 2011 1:45 PM

# re: SharePoint List Views –Quick & Easy jQuery Filter
Requesting Gravatar...
Thanks Marc... if you take a look at Jaap's demo (http://vossers.securespsites.com/instantlistfilterdemo/default.aspx) you can get an idea for what I mean by a functionality vs. performance hit.

His list has less than 100 entries? or around that many anway. Compare the performance to mine that has 250 entries. It's noticably faster.

Don't get me wrong.. Jaap's is MUCH cooler but if you are worried about performance you do have some options... Good stuff. I'm sure I'll use Jaap's solution now as well. :)

Thanks again!
Left by Mark on Jan 27, 2011 2:42 PM

# re: SharePoint List Views –Quick & Easy jQuery Filter
Requesting Gravatar...
I also have a demo of live filter:
http://www.pathtosharepoint.com/Pages/GanttTimeScale.aspx

I just copied it from the Master himself:
http://ejohn.org/blog/jquery-livesearch

His scenario is a little bit different, but here is the main idea: you only run the selector once and cache the list of rows.

I am not sure why you're using the find function btw, instead of $('table[class="ms-listviewtable"] tr'). Is it faster?
Left by Christophe on Jan 28, 2011 4:57 AM

# re: SharePoint List Views –Quick & Easy jQuery Filter
Requesting Gravatar...
Hey Christophe, thanks for the awesome links.

I used the find because I'm a hack and that's how I got it working. :) But now I am curious if one method is faster than the other... I'll try and do some tests this weekend and see what I come up with.

Thanks again for the info!
Mark
Left by Mark on Jan 28, 2011 5:50 PM

# re: SharePoint List Views –Quick & Easy jQuery Filter
Requesting Gravatar...
You're welcome! You could also try the scope option (which should not make any difference, but who knows...):
$(selector, scope)

Also, make sure you only grab the rows of the main table, not rows of embedded tables.
Left by Christophe on Jan 28, 2011 8:33 PM

# re: SharePoint List Views –Quick & Easy jQuery Filter
Requesting Gravatar...
Hey Christophe,

Just FYI, I did a quick performance test between

$('table [class="ms-listviewtable"]').find('tr')

and

$('table[class="ms-listviewtable"] tr')

and the results are virtually identical. (less than 1% difference after average of several tests).

I implemented the test on the second demo page of this blog:

http://www.mrackley.me/SitePages/DataViewFilter.aspx

that's one of the things i don't like about jQuery actually.. there are so many ways to do the same thing.. oh well... I learned something new so thanks again!

Mark
Left by Mark on Feb 01, 2011 1:22 PM

# re: SharePoint List Views –Quick & Easy jQuery Filter
Requesting Gravatar...
Does this work with SP 2010? We have used it with SP 2007 and it does not seem to be working in our SP 2010 Dev and QA environments. Is there an update or a change that needs to be made to get it to worek properly?
Left by Areon Jackson on Feb 15, 2011 5:01 PM

# re: SharePoint List Views –Quick & Easy jQuery Filter
Requesting Gravatar...
Areon,

The concept/method should work fine in 2010 as well, I have not looked under the hood yet to see how the table is structured in 2010, so it may be a little different and if it's not working for you it's probably because the class name is different for the table...

The above code is looking for a table with the class "ms-listviewtable". Try viewing the source of your page and see what the class for the table you want to filter is and replace it accordingly.

After I get a couple of cups of coffee in me this morning, I'll try and do the same.

good luck,
Mark
Left by Mark on Feb 16, 2011 7:41 AM

# re: SharePoint List Views –Quick & Easy jQuery Filter
Requesting Gravatar...
Hi Mark and thanks for sharing this script.

I've a little question, and that goes for the limitations with the case. Is there possible to add a parameter to this script so it searches both cases? and if it does, how does this impact performance?

Br, Roger
Left by Roger on Mar 06, 2011 7:53 AM

# re: SharePoint List Views –Quick & Easy jQuery Filter
Requesting Gravatar...
How do i change the case sensitive? HELP!
Left by Sherri on Jul 01, 2011 7:59 AM

# re: SharePoint List Views –Quick & Easy jQuery Filter
Requesting Gravatar...
Thanks for the great code! Works like a charm on SP2010 as well.

I was also looking for the "ignore uppercase" so i have implemented the following:

text = text.toLowerCase();
source = source.toLowerCase();

Right under the following line:
source = stripHTML($(this).html());

Do take note of the performance as mentioned in the article.Works for me! Hope it helps.
Left by Kojeeman on Jul 05, 2011 7:05 AM

# re: SharePoint List Views –Quick & Easy jQuery Filter
Requesting Gravatar...
Thanks, Kojeeman! That helped but now my header row is being removed when the user filters. The code says it shouldn't include the header row any suggestions?
Left by Sherri on Jul 06, 2011 1:49 PM

# re: SharePoint List Views –Quick & Easy jQuery Filter
Requesting Gravatar...
Hi,
Is there a way to search the whole list rather than just the first x rows?

Thanks
Left by Irfan Faruki on Aug 22, 2011 10:08 AM

# re: SharePoint List Views –Quick & Easy jQuery Filter
Requesting Gravatar...
It is very help ful
Left by Sandhya on Jan 04, 2012 6:02 AM

Your comment:
 (will show your gravatar)


Copyright © Mark Rackley | Powered by: GeeksWithBlogs.net