Nibble

Xslt Paging example

Default umbraco has a bunch of xslt templates you can choose from when creating a new xslt file, for me about 80% of the time I start from a template and adjust it to my needs. But one thing that is missing is an example of paging, so for those of you who would like to know how to add paging to a list, check out the examples below. To change the number of items displayed just change the recordsPerPage variable. I started from the “list sub pages from current page template” in umbraco and added 2 examples with paging below (one with only a previous and a next link and another example that also adds page numbers).

 

Without paging ( List Sub Pages From Current Page template )

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE xsl:Stylesheet [ &lt;!ENTITY nbsp “&#x00A0;”> ]>
<xsl:stylesheet
version=”1.0″
xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”
xmlns:msxml=”urn:schemas-microsoft-com:xslt”
xmlns:umbraco.library=”urn:umbraco.library”
exclude-result-prefixes=”msxml umbraco.library”>
 
 
<xsl:output method=”xml” omit-xml-declaration=”yes”/>
 
<xsl:param name=”currentPage”/>
 
<xsl:template match=”/”>
 
<!– The fun starts here –>
<ul>
<xsl:for-each select=”$currentPage/node [string(data [@alias=’umbracoNaviHide’]) != ‘1′]”>
<li>
<a href=”{umbraco.library:NiceUrl(@id)}”>
<xsl:value-of select=”@nodeName”/>
</a>
</li>
</xsl:for-each>
</ul>
 
</xsl:template>
 
</xsl:stylesheet>

 

With paging ( previous + next )

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE xsl:Stylesheet [ &lt;!ENTITY nbsp “&#x00A0;”> ]>
<xsl:stylesheet
version=”1.0″
xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”
xmlns:msxml=”urn:schemas-microsoft-com:xslt”
xmlns:umbraco.library=”urn:umbraco.library”
exclude-result-prefixes=”msxml umbraco.library”>
 
 
<xsl:output method=”xml” omit-xml-declaration=”yes”/>
 
<xsl:param name=”currentPage”/>
 
<xsl:template match=”/”>
 
<xsl:variable name=”recordsPerPage” select=”1″/>
 
<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> &nbsp;
 
<xsl:variable name=”numberOfRecords” select=”count($currentPage/node)”/>
 
<!– The fun starts here –>
<ul>
<xsl:for-each select=”$currentPage/node [string(data [@alias=’umbracoNaviHide’]) != ‘1′]”>
<xsl:if test=”position() &gt; $recordsPerPage * number($pageNumber) and
position() &lt;= number($recordsPerPage * number($pageNumber) +
$recordsPerPage )">
<li>
<a href=”{umbraco.library:NiceUrl(@id)}”>
<xsl:value-of select=”@nodeName”/>
</a>
</li>
</xsl:if>
</xsl:for-each>
</ul>
 
<xsl:if test=”$pageNumber &gt; 0″>
<a href=”?page{$pageNumber -1}”>previous </a>
</xsl:if>
 
<xsl:if test=”(($pageNumber +1 ) * $recordsPerPage) &lt; ($numberOfRecords)”>
<a href=”?page={$pageNumber +1}”>next</a>
</xsl:if>
</xsl:template>
 
</xsl:stylesheet>

 

With paging ( previous + page numbers + next )

<?xml version=”1.0″ encoding=”UTF-8″?>
<!DOCTYPE xsl:Stylesheet [ &lt;!ENTITY nbsp “&#x00A0;”> ]>
<xsl:stylesheet
version=”1.0″
xmlns:xsl=”http://www.w3.org/1999/XSL/Transform”
xmlns:msxml=”urn:schemas-microsoft-com:xslt”
xmlns:umbraco.library=”urn:umbraco.library”
exclude-result-prefixes=”msxml umbraco.library”>
 
 
<xsl:output method=”xml” omit-xml-declaration=”yes”/>
 
<xsl:param name=”currentPage”/>
 
<xsl:template match=”/”>
 
<xsl:variable name=”recordsPerPage” select=”1″/>
 
<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> &nbsp;
 
<xsl:variable name=”numberOfRecords” select=”count($currentPage/node)”/>
 
<!– The fun starts here –>
<ul>
<xsl:for-each select=”$currentPage/node [string(data [@alias=’umbracoNaviHide’]) != ‘1′]”>
<xsl:if test=”position() &gt; $recordsPerPage * number($pageNumber) and
position() &lt;= number($recordsPerPage * number($pageNumber) +
$recordsPerPage )">
<li>
<a href=”{umbraco.library:NiceUrl(@id)}”>
<xsl:value-of select=”@nodeName”/>
</a>
</li>
</xsl:if>
</xsl:for-each>
</ul>
 
<xsl:if test=”$pageNumber &gt; 0″>
<a href=”?page{$pageNumber -1}”>previous </a>
</xsl:if>
 
<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>
 
<xsl:if test=”(($pageNumber +1 ) * $recordsPerPage) &lt; ($numberOfRecords)”>
<a href=”?page={$pageNumber +1}”>next</a>
</xsl:if>
</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”>
 
<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>
 
 
</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>
</xsl:stylesheet>

25 Comments so far

  1. Hartvig on April 16th, 2008

    Cool - great stuff on this blog!

    You’re a core team member with commit access - you should add a paging template to the core (just remember to add an item in the tracker first and associate your commit with the tracker item).

    Cheers,
    Niels…

  2. Tim Geyssens on April 16th, 2008

    Hey Niels,

    Alrighty, I’ll add one to the xslt templates.

    /Tim

  3. Warren Buckley on May 13th, 2008

    Hiya Tim,
    Great post this has just helped me out with some pagination, however I think this would be better if you use 1 instead of 0. As in URLs it makes more common sense to start from page 1 as opposed to page 0.

    For example you dont have page 0 in a book, people are more used to starting from page 1.

    With that said I tried modify the XSLT to do this, without much luck - would you be able to lend a hand?

    //Warren

  4. Anders Burla on August 4th, 2008

    Hi Warren, I have changed the xslt to use page 1 as default cause i needed that as well :)
    Here you go

    <!DOCTYPE xsl:stylesheet [ ]>

    1

     

    1

  5. Berntsen on January 26th, 2009

    Hi Tim!

    Is it possible to download these as xslt-files somewhere? Or could you mail them to me? I’ve been trying to get this to work but without any luck, yet… This is exactly what I’m looking for. :)
    Thanks in advance,
    Berntsen

  6. Yanela Somdaka on November 27th, 2009

    Awesome article man….

    this is sure gonna help me with my current project
    Yanela

  7. Great on April 1st, 2010

    you are great!

  8. Saxon on May 18th, 2010

    Fantastic - this saved me a bucket of time - thank you! Straightforward and elegant.

  9. […] to “Developer” -> “XSLT Files” -> “ListNewsEvents.xslt” or open it up in your IDE. Nibble have written a paging XSLT that I have been peaking at. So, time to inject some of Nibbles XSLT into ListNewsEvents.xslt. I […]

  10. swapy on December 29th, 2010

    Great Example

  11. Janusz Stabik on March 23rd, 2011

    Great work Tim, works a treat.

  12. praveen on April 20th, 2011

    Hi there, I am newbie to UMBRACO
    I have a single long page, I want to split the page into 4 pages and have pagination, so that we can flick through the page, how can we do this? is this possible, please let me know, and many thanks in advance
    Regards
    Praveen

  13. Jarrod Demeza on May 31st, 2011

    I apologise in advance if I am mistaken but the following code seems inefficient.

    Does this mean it loads the entire result set and simply steps over the records where the position is greater than the allowed items per page? Wouldn’t it make more sense to narrow the result set?

  14. ramesh on September 19th, 2011

    i want to know xsl pagination ..i unable to understant how to apply pagination…am new to xsl…just 20 days onward am working in xsl..plz help me

  15. Dmitrij on November 19th, 2011

    I have the same problem as Ramesh, I am a bit new to XSLT, I checked on this post, and as I understand so far - or there is an syntax error, or it is old version of XSLT? I might be mistaken, but would be great just to get a normal snippet for such widely used function. So wearied that no one actually tried to do anything like this before? HELP plz :(((

  16. Singham on November 25th, 2011

    Can you please explain the code? as it is difficult to understand..

  17. Prashant on December 19th, 2012

    Hi,

    can you please provide me xml which i can test with above xslt. i wanted xml format so that i can integrate it.

  18. Alex on January 15th, 2013

    Thanks so much for the paging examples!

  19. William on February 7th, 2013

    Hi,

    I expect you know but others might not but your code “prettifier” completely bolloxes the quotes and comments, so anyone trying to use this would need to do a find and replace all the weird single, double quotes and the open close comment tags. Otherwise it’s great.
    The last few params could do with a bit of a tidy, the value-of are superfluous.
    I’ll be using it to list products, so will probably enhamce it with page numbers etc… Do you want me to send you the revised version?
    @Prashant - You need to create an Umbraco node with child nodes and then put this on your parent node to use this. You then can put whatever you want where they have the wrapper and the for-each ;)

  20. William on February 7th, 2013

    Hi again,

    I see you actually did have numbering,oops sorry, it wasn’t showing for me because my child “nodes” are called “Product” not “node”, I had missed that bit in your code.
    There are a few spaces needed between the numbers, which I have added using  . Adding the wrapper stops the xsl engine including all white space. I also notice you are missing an = sign in the line that says:
    previous
    it should say:
    previous

    without the weird quotes too :)

  21. William on February 7th, 2013

    I see this doesn’t like HTML so I try to escape and see if that works.
    There are a few spaces needed between the numbers, which I have added using
    <xsl:text>&nbsp;</xsl:text>. Adding the wrapper stops the xsl engine including all white space. I also notice you are missing an = sign in the line that says:
    <a href=”?page{$pageNumber -1}”>previous</a>
    it should say:
    <a href=”?page={$pageNumber -1}”>previous</a>

  22. Tom on June 21st, 2013

    Hello: )

    in pervious href ‘=’ is missing right after ‘page’

    Greetings!

  23. Jerker on August 13th, 2013

    I have tried to add a conditional statment in order to request a tag and then filter the $matchedNodes. But I get some SQL exception errors. Does anyone been able to handle filtering by an requested tag?

  24. Bob on May 14th, 2014

    Where do I find the ‘nodeName’?????????

  25. Sam on October 29th, 2014

    I am trying introduce pagination and filtering on a “grid data type”(installed on Umbraco version 7). I do not want pagination for child nodes but for 1 of the properties of my current page (which is of Grid data type) . Can you help me with this ?

    Greetings

Leave a Reply