Sorting table using jQuery


Recently I worked for a requirement with my collegue Ankur Chourasia on consolidating the information from the sub sites and displaying it on the main site using Content Query Web Part.  I consider that as the first part of this post.  Please make sure to go through “A Little More about Content Query Web Part“. The consolidation and additional column displaying part is done by Ankur Chourasia and he did it fantastically. I will surely encourage him to add that onto his blog site.
There was another interesting requirement where in the user wanted the table data to be sorted. Just like we do in any other SharePoint lists, again my love jQuery came onto picture and we could achieve the sorting table functionality.

I found it worth putting down on paper and sharing. Comments welcome J

JQuery Library

The basic requirement to jQuerify any solution is the jQuery library. All we need to do is add a script tag that points to jQuery JavaScript file. For our solution we have downloaded the script file from jQuery Download page. We have uploaded the solution onto a document library the alternative way to enable jQuery is refer the file directly from Google Code CDN. The second way is definitely bit slowly since it has to load jQuery file from remote location.

Table Sorter Plug-in

The beauty of jQuery is the extensibility. We get plug-in written for almost every business problem, I was lucky here too many thanks to the simplest table sorter plug in by Christian Bach. I downloaded the JavaScript file and uploaded it onto the shared document. I also downloaded the StyleSheet to format my table from http://tablesorter.com/themes/blue/blue.zip.

Here is the final structure of my files.

Shared Documents

è CSS

o Style.css

o Other gif files

è JS

o jquery.min.js

o jquery.tablesorter.min.js

è tablesort.html (this contains the jquery code)

JQuery Code

The jQuery code is pretty easy for this. Add the reference to jQuery library and Table Sorter javascript file along with stylesheet (style.css). in the jQuery code call tablesorter() method for all the “table” tags. This is it. Following is the code snippet. I have kept this code in tablesort.html file.

HTML Code

The table sorter plug in looks out for all the <table> tag which contains the “class=tablesorter” attribute. Other requirement is that the table columns should be inside the <thead> element and table body should be inside the <tbody> element. For e.g.

ItemStyle.xsl template modification

Here is the modified template in the ItemStyle.xsl file to achieve the required html output. Notice the class attribute of <table> element the <thead> and <tbody> elements.

Enabling sorting on the CQWP tables

– Upload the modified ItemStyle.xsl file onto Style Library.

– Make sure that required JavaScript files and html file are uploaded on the SharePoint document library.

– Navigate to the page where you have added the Content Query Web Part.

– Add a Content Editor Web Part. Edit the web part and set the Content Link property to URL of “TableSort.html” file in the Shared Documents library (e.g yoursitedocumentstableSort.html).

Tip: You can keep this content editor web part as hidden, the jquery code to enable sorting will still work.

– This will make the column heading clickable. Clicking on the column heading will sort the rows of the table.

End Note

I hope this helps some one in need. I sincerely like to thank Ankur Chourasia and Christian Bach

Advertisements

3 thoughts on “Sorting table using jQuery

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s