Paging large content in SharePoint using jQuery
Recently 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.
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 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.
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:
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.