How to make pagination in XSLT

Question

I have the following XSLT:

<xsl:template match="/">        
  <div id="dokumentliste">
    <xsl:variable name="alleNyheder" select="$currentPage//node" />

    <xsl:for-each select="$alleNyheder">
    <xsl:sort data-type="text" select="@createDate" order="descending" />            

        <xsl:if test="./data[@alias='manchet'] != ''">
            <div class="newsitem">
                <h2>
                    <xsl:value-of select="./data[@alias='title']"/>
                </h2>

                <xsl:if test="./data[@alias = 'manchet'] != ''">
                    <div class="nyhedContent">
                        <p>
                            <span class="dokumentListeDato">
                                <xsl:choose>
                                    <xsl:when test="./data[@alias='date'] != ''">
                                        <xsl:value-of select="umbraco.library:FormatDateTime(./data[@alias='date'], 'dd. MMMM yyyy')"/>
                                    </xsl:when>
                                    <xsl:otherwise>
                                        <xsl:value-of select="umbraco.library:FormatDateTime(./@createDate, 'dd. MMMM yyyy')"/>
                                    </xsl:otherwise>
                                </xsl:choose>
                            </span>
                            <xsl:value-of select="./data[@alias = 'manchet']"/>
                        </p>
                    </div>
                </xsl:if>
                <div class="dokumentListe_laes_mere">
                    <a href="{umbraco.library:NiceUrl(@id)}">
                        Læs mere<img src="/frontend/images/macro/macro_laes_mere.png" alt="Læs mere"/>
                    </a>
                </div>
            </div>
            <!-- End newsitem -->
        </xsl:if>
      </xsl:for-each>
   </div> 
 </xsl:template>

I am making a newslist, and would like to make some sort of pagination. Almost the same one as seen on Google. You know "the usual one".

But I can't figure out how to do this.

The number of newsitems on each page isn't that important, but lets say 10 on each page. When the 10 first newsitems are shown, I would like the pagination to show up. With the "Next" and "Previous" buttons to the right and the left of the numbers.

Is it possible to make this, and have I explained my problem good enough? I use the Umbraco CMS by the way :)

Thank you very much.

-Kim

Answer 1

Something like this: I've left some code in there for dealing with images in your listing too :-)

<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:template match="/">
 <xsl:variable name="recordsPerPage" select="2"/>
 <xsl:variable name="pageNumber">
  <xsl:choose>
   <!-- first page -->
   <xsl:when test="umbraco.library:RequestQueryString('page') &lt;= 0 or string(umbraco.library:RequestQueryString('page')) = '' or string(umbraco.library:RequestQueryString('page')) = 'NaN'">0</xsl:when>
   <!-- what was passed in -->
   <xsl:otherwise>
    <xsl:value-of select="umbraco.library:RequestQueryString('page')"/>
   </xsl:otherwise>
  </xsl:choose>
 </xsl:variable>
 <xsl:variable name="numberOfRecords" select="count($currentPage/node)"/>

 <!-- The fun starts here -->

 <xsl:call-template name="pagination">
  <xsl:with-param name="pageNumber" select="$pageNumber"/>
  <xsl:with-param name="recordsPerPage" select="$recordsPerPage" />
  <xsl:with-param name="numberOfRecords" select="$numberOfRecords" />
 </xsl:call-template>

<ul class="listing self-clear">
  <xsl:for-each select="$currentPage/node [string(data [@alias='umbracoNaviHide']) != '1']">
   <xsl:sort order="descending" select="data[@alias='releasedOn']"></xsl:sort>

   <xsl:if test="position() &gt; $recordsPerPage * number($pageNumber) and position() &lt;= number($recordsPerPage * number($pageNumber) + $recordsPerPage )">
    <li>
     <xsl:attribute name="class">
      <xsl:if test="data[@alias='image'] = ''">
       no-img
      </xsl:if>
      <xsl:if test="position() = $recordsPerPage * (number($pageNumber) + 1)">
       last
      </xsl:if>
     </xsl:attribute>
     <h3>
      <a href="{umbraco.library:NiceUrl(@id)}">
       <xsl:value-of select="@nodeName"/>
      </a>
     </h3>
     <xsl:if test="data[@alias='image'] != ''">
      <img src="{data[@alias='image']}" class="drop-shadow" />
     </xsl:if>
     <p class="date"><xsl:value-of select="umbraco.library:LongDate(data[@alias='releasedOn'])"/></p>
     <xsl:value-of select="data[@alias='abstract']" disable-output-escaping="yes"/>
     <a href="{umbraco.library:NiceUrl(@id)}" class="read-more">Read More</a>
    </li>
   </xsl:if>
  </xsl:for-each>
 </ul>

 <xsl:call-template name="pagination">
  <xsl:with-param name="pageNumber" select="$pageNumber"/>
  <xsl:with-param name="recordsPerPage" select="$recordsPerPage" />
  <xsl:with-param name="numberOfRecords" select="$numberOfRecords" />
 </xsl:call-template>

</xsl:template>

<xsl:template name="pagination">
 <xsl:param name="pageNumber"/>
 <xsl:param name="recordsPerPage"/>
 <xsl:param name="numberOfRecords"/>

 <div class="pagination">
 <div class="wrapper">

  <xsl:if test="(($pageNumber +1 ) * $recordsPerPage) &lt; ($numberOfRecords)">
   <a href="?page={$pageNumber +1}" class="next">Next</a>
  </xsl:if>

  <xsl:if test="$pageNumber &gt; 0">
   <a href="?page={$pageNumber -1}" class="prev">Prev</a>
  </xsl:if>

  <span class="page-nos">
  Page
  <xsl:call-template name="for.loop">
   <xsl:with-param name="i">1</xsl:with-param>
   <xsl:with-param name="page" select="$pageNumber +1"></xsl:with-param>
   <xsl:with-param name="count" select="ceiling(count($currentPage/node)div $recordsPerPage)"></xsl:with-param>
  </xsl:call-template>
  </span>

 </div>
 </div>
</xsl:template>

<xsl:template name="for.loop">
 <xsl:param name="i"/>
 <xsl:param name="count"/>
 <xsl:param name="page"/>
 <xsl:if test="$i &lt;= $count">
  <span>
  <xsl:if test="$page != $i">
   <a href="{umbraco.library:NiceUrl($currentPage/@id)}?page={$i - 1}" >
    <xsl:value-of select="$i" />
   </a>
  </xsl:if>
  <xsl:if test="$page = $i">
   <xsl:value-of select="$i" />
  </xsl:if>
  </span>
 </xsl:if>

 <xsl:if test="$i &lt;= $count">
  <xsl:call-template name="for.loop">
   <xsl:with-param name="i">
    <xsl:value-of select="$i + 1"/>
   </xsl:with-param>
   <xsl:with-param name="count">
    <xsl:value-of select="$count"/>
   </xsl:with-param>

   <xsl:with-param name="page">
    <xsl:value-of select="$page"/>
   </xsl:with-param>
  </xsl:call-template>
 </xsl:if>
</xsl:template>

Answer 2

I figured this one out now. I can see that you have just copy/pasted the pagination that where made by Tim Geyssens here: http://www.nibble.be/?p=11

And the code is also kind'a good, but I changed some of it to get it working. I don't know if I should just accept my own answer as the right one, the answer from Myster as the right one or if I can delete this post?