Content Query Web Part Paging

Working with the Content Query Web Part (CQWP) in SharePoint 2010 I was wondering how to add paging controls to display e.g. only 10 items.

After some research I found this article from Waldek:

http://blog.mastykarz.nl/sharepoint-2010-content-query-web-part-paging/

Nice solution, but I didn’t want to add a .wsp, make it more adaptable for myself and tried to achieve really simple paging functionality by using JavaScript.

I used the effects of this paging list, but made it really minimal:

http://demo.tutorialzine.com/2010/05/sweet-pages-jquery-pagination-solution/demo.html

This is the final result:

1 thing I noticed was, I had to change the ContentQueryMain.xsl to fit the right format:

Output:

I defined the <li> elements in the ItemStyle.xsl:

It’s that simple! Paging in a CQWP with a nice sliding effect.

If you don’t want to change your ContentQueryMain.xsl then you have to export the CQWP and reference to your own custom .xsl file.

Thanks!