Create a Google style paging component in XSLT

I’ve noticed how most of the Sitecore blogs takes up relatively advanced topics on Sitecore, so I’ve decided to share with you some of my more simpler tricks.

This article is meant as a tutorial.  This is a small XSLT I’ve done for several projects that will display a Google style paging selector for any list. Imagine you have a list with 200 items. Displaying all items on one page can slow down your page and make it cluttered. Instead we add a paging component (like Google does it) to the top of the list, and display only 10 items from the list at a time. When clicking the pager, the same page will be called with a parameter ?page=n. The list uses the querystring to determine which elements from the list to display.

Lets begin with the component. First I create a new xsl:template called tplPaging:

<xsl:template name="tplPaging">
  <!-- Identifies the number of items in the list -->
  <xsl:param name="numberOfItems" />
  <!-- Optional parameter identifying the default selected page. Default is 1 -->
  <xsl:param name="currentPage" select="sc:qs('page','1')" />
  ... <!-- more code here -->

The template needs 2 parameters, the length of the list (total number of items), and the current page. The current page value can be taken from the querystring, and the default value is page one. So if nothing is defined, we will start with page 1.

Then I need 3 variables: Total number of pages, the start page and the end page. In this case I will only draw 5 pages before and after the current page. Google draws 10, but my lists are shorter, so I’ll stick to 5.

<!-- Calculate the maximum number of pages to show in the paging component -->
<xsl:variable name="numberOfPages" select="floor((number($numberOfItems)-1) div 10)+1"/>

<!-- Calaulate the starting position of the numbers -->
<xsl:variable name="startPage">
    <xsl:when test="$currentPage > 6">
      <xsl:value-of select="$currentPage - 5"/>
      <xsl:value-of select="1"/>

<!-- Calculate the ending position of the numbers -->
<xsl:variable name="endPage">
    <xsl:when test="$numberOfPages - $currentPage > 5">
      <xsl:value-of select="$currentPage + 5"/>
      <xsl:value-of select="$numberOfPages"/>

Now I can recursively draw the numbers in the paging component. I’ll show you the recursive template later. First the code to call the recursive loop:

<!-- Recursively draw the paging component -->
  <xsl:if test="$startPage > 1">
      <a href="?page={$currentPage - 6}">Previous</a></li>
  <xsl:call-template name="tplNumber">
    <xsl:with-param name="current" select="$currentPage"/>
    <xsl:with-param name="number" select="$startPage"/>
    <xsl:with-param name="max" select="$endPage"/>
  <xsl:if test="$currentPage + 5 < $numberOfPages">
      <a href="?page={$currentPage + 6}">Next</a></li>

Notice how I do not draw the Previous and the Next unless they are needed?
The template tplNumber is called to draw the actual numbers:

<xsl:template name="tplNumber">
  <xsl:param name="current"/>
  <xsl:param name="number"/>
  <xsl:param name="max"/>

    <xsl:when test="$number = $current">
      <!-- Show current page without a link -->
	<li class="current">
        <xsl:value-of select="$number"/>
        <a href="?page={$number}"><xsl:value-of select="$number"/></a>

  <!-- Recursively call the template untill we reach the max number of pages -->
  <xsl:if test="$number < $max">
    <xsl:call-template name="tplNumber">
      <xsl:with-param name="current" select="$current"/>
      <xsl:with-param name="number" select="$number+1"/>
      <xsl:with-param name="max" select="$max"/>

You can expand this function. What should the pager do if there is no items in the list? Anyway, the examle is actually very simple and shows how easy it is to do paging. And by the way – Sitecore will actually render this blindingly fast.

About briancaos

Developer at Pentia A/S since 2003. Have developed Web Applications using Sitecore Since Sitecore 4.1.
This entry was posted in Sitecore 5, Sitecore 6 and tagged , , , . Bookmark the permalink.

5 Responses to Create a Google style paging component in XSLT

  1. evmel says:

    hi, i am using below xslt to do next and previous paging. how can i or must i include your google style paging between the previous and next link?







  2. briancaos says:

    Instead of the code you have posted, you must include the code in this post, and call it with the total number of items in the list:

    <xsl:call-template name=”tplPaging”>
    <xsl:with-param name=”numberOfItems” select=”???????????”/>

  3. cowgod says:

    this helped me out a ton, although it’s not exactly “google style.” i think having the next button go to the next page that isn’t visible is a little disorienting. it should go to the next page after the one you are currently viewing. thanks for the groundwork though!

  4. Yaseen says:

    i am using Johann’s xslt.js ( to transform XML with XSLT

    My questions:
    1. Is it possible to implement your code in this case?
    2. where should i call “tplPaging” in my code?

    Thanks in advance.

  5. briancaos says:

    I’m not sure about the Javascript library. Especially since I use a XslExtension to get the QueryString parameter (sc:qs()).
    Also, where shoukld you call tplPaging? The XSLT consists of a template that is called from another template, and I’m not sure your library can handle this.
    I would recommend that you look at this example instead: which is an example on how to create the same paging component, this time using C#.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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