How to make pagination in XSLT - 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') <= 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() > $recordsPerPage * number($pageNumber) and position() <= 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"/>
Read More
</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) < ($numberOfRecords)">
Next
</xsl:if>
<xsl:if test="$pageNumber > 0">
Prev
</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 <= $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 <= $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?