Nibble

umbraco page flow example

Instead of having a previous and next link when you want to add pagination to a list of items I wanted to try to load in the next page when the users scroll down to the latest item.

It’s actually pretty easy todo thanks to a jQuery plugin jqPageFlow, that takes care of fetching the records when the user scrolls down.

What the plugin needs is just a page where it can fetch the records (and it passes the page number as a querystring parameter)

So, all I need was a little xslt macro (very similar to the pagination one) and a alternative template (that is used in the background to fetch the items).

The xslt:

<?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" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:umbraco.contour="urn:umbraco.contour"
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets umbraco.contour ">
 
<xsl:output method="xml" omit-xml-declaration="yes"/>
 
<xsl:param name="currentPage"/>
 
    <xsl:variable name="records"
      select="$currentPage/* [@isDoc and string(umbracoNaviHide) != ‘1′]" />
    
    <xsl:variable name="recordsCount"
      select="count($records)" />
    
    <xsl:variable name="recordsPerPage"
      select="4"/>
    
    
    <xsl:variable name="pageNumber">
      <xsl:choose>
        <xsl:when test="umbraco.library:RequestQueryString(’p')">
           <xsl:value-of select="umbraco.library:RequestQueryString(’p')"/>
        </xsl:when>
        <xsl:otherwise>
            <xsl:value-of select="0"/>
        </xsl:otherwise>
      </xsl:choose>
    </xsl:variable>
    
    
<xsl:template match="/">
 
<xsl:for-each select="$records">
  
  <xsl:if test="position() &gt; $recordsPerPage * (number($pageNumber)) and
                position() &lt;= number($recordsPerPage * (number($pageNumber)) + $recordsPerPage)">
                  
                  <xsl:apply-templates select="." />
  </xsl:if>
 
</xsl:for-each>
 
  <xsl:if test="$pageNumber = 0">
  <script type="text/javascript">
      $(document).ready(function(){
      
        $("body").flexiPagination({
           url: "/news/pagefeed.aspx",
           currentPage: 0,
           totalResults: <xsl:value-of select="$recordsCount"/>,
           perPage: <xsl:value-of select="$recordsPerPage"/>,
           container: "#mycontainer",
           loadcontainer: "#loadcontainer",
           pagerVar : "p",
           loaderImgPath: "images/loader.gif",
           debug : 0
        });
      });
    </script>
  </xsl:if>
  
</xsl:template>
    
<xsl:template match="*">
 
    <li>
      <a href="{umbraco.library:NiceUrl(@id)}">
        <xsl:value-of select="@nodeName"/>
      </a>
      <br/>
      <p>
        <xsl:value-of select="content"/>
      </p>
  </li>
  
</xsl:template>
  
 
</xsl:stylesheet>

How the macro is placed on the template:

 <ul id="mycontainer">
  <umbraco:Macro Alias="PaginationFlow" runat="server"></umbraco:Macro>
  </ul>
  <div id="loadcontainer">
  </div>

 

Contents of the altTemplate named pagefeed (basicly it’s just the macro):

<%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>
 
<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
 <umbraco:Macro Alias="PaginationFlow" runat="server"></umbraco:Macro>
</asp:Content>


Final result looks like this (loading happens pretty fast, so might be hard to see)

4 Comments so far

  1. Fredrik Sewén on December 27th, 2010

    Hi Tim,

    That looks great, but is it SEO-friendly? Do you know?

    /Fredrik

  2. Kouzzmitch on April 10th, 2011

    Thanks for this blog. I helped a lot
    I did catalog list results load with this blog help

    I’ve faced another problem but i think this link will help.
    http://stackoverflow.com/questions/3834812/copying-an-xslt-variable

    Problem was about how to substitute $currentpage with something from querystring? because catalog results depend on current page and you shoul do it like this in javascript call on pageflow

    url: “/ru/results.aspx?current=>”,

  3. Kandy on October 6th, 2011

    I have done successfully! but it loads all page in

    Help me!

  4. Eric Schrepel on January 3rd, 2014

    Is there a Razor interpretation or implementation of this? We have a blog page where it’d be great to continue loading posts once the scroll reaches the bottom of the page, but I’m not quite clever enough to translate the XSL stuff into Razor/MVC.

    As always, your posts are imminently helpful, thanks again.

Leave a Reply