Paging large content in SharePoint using jQuery
JavaScript, jQuery, SharePoint, Usability, WCM, WebdesignRecently I’ve stumbled upon an interesting challenge on the Microsoft SharePoint Forums: how to automatically page the content of a large Publishing Page? And while I came up with a plausible solution quite quickly I have decided to make it work as well.
The case
Imagine you had a Publishing Page with a large chunk of content in the body (PublishingPageContent field for example). While you might just throw it to the users/visitors to read in one piece, it’s definitely much neater to split the content into pages.
The requirements
The only requirement posted by the author of the thread was that you should see the complete content while editing the page but have the paging enabled while in display mode.
Looking at the above many different solutions appear on the horizon. To keep it simple and relatively lightweight I suggested using JavaScript for paging and a wrapper control to conditionally load the JavaScript (display mode only).
The solution
As I’ve already mentioned I’ve chose for JavaScript above servers-side controls to achieve the goal. In order to provide similar experience you would have to use AJAX, to display another page without an annoying postback.
Working with JavaScript is not as straight-forward as we – .NET developers – would like it to be. Especially in such scenario as described above, when you have to obtain a piece of HTML, split it into chunks, and provide paging controls with the paging functionality. To simplify working with JavaScript I have decided to use jQuery – a powerful library which is being used in many web projects nowadays.
Using the functionality that I have created, paging your own content comes down to entering the JavaScript snippet below:
The ins and outs
I started off with breaking the whole thing into work items. I came up with the following list:
- Read the content of the given wrapper (eg. div)
- Split the retrieved content into chunks (eg. into paragraphs)
- Provide controls to display pages
- Display page based on the provided number of chunks per page
- Wrap it all in a class so it at least pretends to be reusable
Retrieving content using jQuery and splitting it into chunks is really simple. The more-challenging part is to display the particular page and provide the paging controls.
Using the chunks stored during the script initialization and the information about the number of chunks per page I came up with the following function:
The showPage function takes one parameter: the number of the page you want to display (1-based). Because arrays in JavaScript are 0-based you have to subtract 1 from the page number to retrieve the proper items from the chunks array. Using a simple calculation (current page x number of items per page to (current page x number of items per page) + number of items per page) you can retrieve the right items from the array. There is one thing you have to consider however. Assuming you have 7 chunks with 3 chunks per page it gives you 3 pages. Using the calculation above you would try to retrieve the 8th item from the array which would result in an exception. To prevent it I have added a check which retrieves the items only if the index is lower than the number of chunks.
Rendering the paging controls is quite straight-forward. Looping through the number of pages I add a list item with a link to the showPage function. The links are being added to all pages except the current so that you can easily track which page you are looking at.
Accessibility
The solution I have made uses the concept of progressive enhancement. The accessible POSH (Plain Old Semantic HTML) is being extended with JavaScript which provides the extra paging functionality. No matter whether you’re using an assistive technology, or having a JavaScript disabled the visitors are always able to get to the content.
What’s next?
The sample I have created is an example of how paging functionality can be achieved using JavaScript. While I’ve tried to parametrize the class, it’s probably not enough to use it for any possible case out there. Depending on the layout that you’re using you might need to customize splitting the content into chunks or generating the paging controls.
Summary
Creating interactive functionality doesn’t necessarily require a server-side solution. If it’s not crucial and can be built on optional technologies like JavaScript, it is in many situations more efficient to do so. Using JavaScript libraries like jQuery makes it easier to provide a fully working and easily manageable cross-browser solution.
December 19th, 2008 at 10:59 am
You've been writing some nice articles! I've been doing these kind of stuff myself as well(have a look at the site) and I must say you come up with some nice twists in thinking and some great ideas for SharePoint Features…
Cheers,
Wes
P.S. Say hi to Erik Schoenmakers for me.
December 19th, 2008 at 11:26 am
@Wesley Bakker: Thanks, I appreciate it
December 31st, 2008 at 4:13 am
Hey Waldek, This blog entry actually fires a thought in my mind about the Content query web part paging. How about rendering the Paging controls inside the content query webpart itself instead of second webpart. My thought is the XSLT will render the Paging controls on the CBQWP and the XSLT will use a custom JSCRIPT for achieving the paging. Ofcourse the paging will still be server side and we will not pull all the records. Unfortunately I am not good at all at XSLT and JSCRIPT else I cld hav tried this, thought of sharing my thougts with you.
December 31st, 2008 at 9:23 pm
@MOSSBUDY: As far as I can tell the CQWP provided with the Podcasting Kit for SharePoint (PKS) works that way. You should really check it out.
January 1st, 2009 at 5:45 pm
This is awesome, now I can have paging inside the web part itself, this is simple awesome!!! Thank you Waldek for pointing me to PKS. Do you see any downside of this paging (if number of records are more than 1000 in a list/library).
WISH YOU A VERY HAPPY & PROSPEROUS NEW YEAR!!!
YOU ROCK and YOU are so very HELPFUL, God bless you.
January 1st, 2009 at 6:16 pm
@MOSSBUDY: Thank you for the wishes, I appreciate it. Happy New Year to you.
As for the PKS CQWP: performance is always an issue when it comes to large lists/result sets. As far as I know CQWP caches the results so each time you fire up the same query you will get the cached results. Another thing to do to suppress the performance penalty is to store the complete pages (rendered HTML). Such approach is being widely used especially on Internet-facing sites.
February 20th, 2009 at 12:38 pm
This is my first introduction to jQuery, so be patient.
[angle brackets replaced by ']
Can you use this example with content other than 'p' formatted content? I have content with embedded 'div' tags, like this:
'div class='1"
'div class='myImages"some Image information'/div'
'div class='myTitle"Title'/div'
'div class='myLocation'>Location'/div'
More of the image, title, location data…..
'/div'
I would like to use the outer 'div class='1" like "p" in your example, but it 'trips' over the other div tags.
Any ideas?
February 22nd, 2009 at 11:26 am
@OldCoder you could use the following selector: $("div.1") although I doubt whether '1' is a valid CSS class name (I thought CSS classes must begin with a letter to be valid).
July 13th, 2009 at 5:27 pm
I also like to have a CQWP with paging.
Does anyone know how i can use the PKS CQWP for it?
Should i have to install it or it's is possible to expand the "installed" CWQP?
Thanks for your help
July 13th, 2009 at 6:29 pm
@Frank: as far as I know it's not available as a separate download, but the source code is available so you can extract it and create a standalone WSP for it.
April 7th, 2010 at 11:47 am
[...] Paging large content in SharePoint using jQuery [...]