separating 10 articles per page - XSLT

Adi 79 posts 183 karma points

Jan 25, 2014 @ 15:39

Separating 10 articles per page?

Hello,

I can't find anywhere on Umbraco CMS very useful option which I have used before while using CMS like Drupal and Joomla. I kindly ask you to first look at the photo in attachment.

As you can see I would like to have option which will limit number of displayed articles in list. For example I would like to see 10 articles per page. Is this possible on Umbraco CMS because I cant find it anywhere under Macros?

Any help is appreciated and many thanks in advance for prompt reply! Adi

Copy Link

Alex Skrypnyk 6175 posts 24186 karma points MVP 8x admin c-trib

Jan 25, 2014 @ 15:48

Hi Adi,

It's not hard to do paging where you want. Is this macros maked with Razor ?

Copy Link

Fuji Kusaka 2203 posts 4220 karma points

Jan 25, 2014 @ 16:55

Hi Adi,

Yes you can easily get this paging working either in xslt or razor.

Since you posted this threat under the xslt section here is how you can procee.

<xsl:variable name="about" select="umbraco.library:GetXmlNodeById('1067')"/><!-- Here is the NodeId from here you are pulling all the list of about -- >

<xsl:variable name="itemsToDisplay" select="10"/> <!-- Number of items to display per page -->
<xsl:variable name="numberOfItems" select="count($about/*[@isDoc][not(umbracoNaviHide =1)])"/>
<xsl:variable name="jump" select="$itemsToDisplay * $pageNumber" />


     
<!-- Paging -->
<xsl:variable name="pageNumber">
  <xsl:choose>
    <xsl:when test="umbraco.library:RequestQueryString('page') = ''">
      <xsl:value-of select="1"/>
    </xsl:when>
    <xsl:otherwise>
      <xsl:value-of select="umbraco.library:RequestQueryString('page')"/>
    </xsl:otherwise>
  </xsl:choose>
</xsl:variable>        
    
<xsl:template match="/">
<!-- start writing XSLT -->
  <ul>
  <xsl:for-each select="$news/*[@isDoc][not(umbracoNaviHide =1)]">
    <xsl:if test="position() &lt; $jump and position() &gt;= ($jump - $itemsToDisplay)">
       <li><xsl:value-of select="@nodeName"/></li>  
     </xsl:if>   
  </xsl:for-each>
</ul>

  
  <xsl:call-template name="for.loop">
  <xsl:with-param name="i">1</xsl:with-param>
  <xsl:with-param name="count" select="ceiling($numberOfItems div $itemsToDisplay)"></xsl:with-param>
</xsl:call-template>  
  
  
  </xsl:template>
  
    <xsl:template name="for.loop">
                <xsl:param name="i"/>
                <xsl:param name="count"/>
                
                <xsl:if test="$i &lt;=$count">
                        <xsl:if test="$pageNumber!= $i">
                                <a href="?page={$i}#about" ><xsl:value-of select="$i" /></a>
                        </xsl:if>

                        <xsl:if test="$pageNumber = $i">
                          <a  class="selected"><xsl:value-of select="$i"/></a>
                        </xsl:if>

                        <xsl:call-template name="for.loop">
                                <xsl:with-param name="i" select="$i + 1" />
                                <xsl:with-param name="count" select="$count">
                                </xsl:with-param>
                        </xsl:call-template>
                </xsl:if>
</xsl:template>

Howevere if you want this in razor you can get the same result here.

Hope it helps

//fuji

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Jan 25, 2014 @ 17:09

Hi Adi,

If you want to do it in XSLT I think this are a good examples of how you could do it: You could give Lee Kelleher´ code a try.

https://gist.github.com/leekelleher/1122148

Or you could try use one of Chriztian Steinmeier´s XSLT helpers on GitHub. , He has made a Pagimation helper https://github.com/greystate/Greystate-XSLT-Helpers/tree/master/paginationhelper

Hope this can help you to do what you need in your case.

If you want to do it in Razor you can see an example here, It's using the "old" style Razor, but it should able to tweak it for v6 MVC style.

http://www.diplo.co.uk/blog/2011/6/21/creating-a-paged-list-in-umbraco-using-razor.aspx

If you´re using MVC you could use something like this I think:

@inheritsUmbracoTemplatePage
@{Layout="MasterTemplate.cshtml";}
@{
        var pageSize = 3;
        var page = 1;int.TryParse(Request.QueryString["page"],out page);
        var items = Model.Content.Children().Where(x => x.IsDocumentType("BlogPost")).OrderByDescending(x => x.CreateDate);
        var totalPages =(int)Math.Ceiling((double)items.Count()/(double)pageSize);

        if(page > totalPages)
        {
                page = totalPages;
        }
        elseif(page < 1)
        {
                page =1;
        }
}

<div class="container">
        @foreach(var item in items.Skip((page -1)* pageSize).Take(pageSize))
        {
                <div class="item">
                        <a href="@item.Url">@item.Name</a>
                </div>
        }

        @if(totalPages > 1)
        {
                <div class="pagination">
                        <ul>
                                @if(page > 1)
                                {
                                        <li><a href="?page=@(page-1)">Prev</a></li>
                                }
                                @for(int p =1; p < totalPages +1; p++)
                                {
                                        var active =(p == page)?" class=\"active\"":string.Empty;
                                        <li class="@(Html.Raw(active))">
                                                <a href="?page=@p">@p</a>
                                        </li>
                                }
                                @if(page <totalPages)
                                {
                                        <li><a href="?page=@(page+1)">Next</a></li>
                                }
                        </ul>
               </div>
        }
</div>

Hope one of these examples I have linked to, or shown you can help you resolve your case with the page number.

/Dennis

Copy Link

Adi 79 posts 183 karma points

Jan 25, 2014 @ 20:28

Hello Fuji,

I have tried code you suggested but I receive erros which you can se bellow on picture:

![XSLT error][1]

and this is the code

]>

  <!-- Paging --> <xsl:variable name="pageNumber">   <xsl:choose>
<xsl:when test="umbraco.library:RequestQueryString('page') = ''">
  <xsl:value-of select="1"/>
</xsl:when>
<xsl:otherwise>
  <xsl:value-of select="umbraco.library:RequestQueryString('page')"/>
</xsl:otherwise>   </xsl:choose> </xsl:variable>        
 <xsl:template match="/"> <!-- start writing XSLT -->   <ul>   <xsl:for-each select="$news/*[@isDoc][not(umbracoNaviHide =1)]">
<xsl:if test="position() < $jump and position() >= ($jump - $itemsToDisplay)">
   <li><xsl:value-of select="@nodeName"/></li>  
 </xsl:if>      </xsl:for-each> </ul>

 <xsl:call-template name="for.loop">   <xsl:with-param name="i">1</xsl:with-param>   <xsl:with-param name="count"

select="ceiling($numberOfItems div $itemsToDisplay)">

 </xsl:template>

<xsl:template name="for.loop">
            <xsl:param name="i"/>
            <xsl:param name="count"/>

            <xsl:if test="$i <=$count">
                    <xsl:if test="$pageNumber!= $i">
                            <a href="?page={$i}#about" ><xsl:value-of select="$i" /></a>
                    </xsl:if>

                    <xsl:if test="$pageNumber = $i">
                      <a  class="selected"><xsl:value-of select="$i"/></a>
                    </xsl:if>

                    <xsl:call-template name="for.loop">
                            <xsl:with-param name="i" select="$i + 1" />
                            <xsl:with-param name="count" select="$count">
                            </xsl:with-param>
                    </xsl:call-template>
            </xsl:if> </xsl:template>

Copy Link

Adi 79 posts 183 karma points

Jan 25, 2014 @ 20:30

Hello Fuji,

I have tried code you suggested but I receive erros which you can se bellow on picture:

and this is the code

]>

  <!-- Paging --> <xsl:variable name="pageNumber">   <xsl:choose>
<xsl:when test="umbraco.library:RequestQueryString('page') = ''">
  <xsl:value-of select="1"/>
</xsl:when>
<xsl:otherwise>
  <xsl:value-of select="umbraco.library:RequestQueryString('page')"/>
</xsl:otherwise>   </xsl:choose> </xsl:variable>        
 <xsl:template match="/"> <!-- start writing XSLT -->   <ul>   <xsl:for-each select="$news/*[@isDoc][not(umbracoNaviHide =1)]">
<xsl:if test="position() &lt; $jump and position() &gt;= ($jump - $itemsToDisplay)">
   <li><xsl:value-of select="@nodeName"/></li>  
 </xsl:if>      </xsl:for-each> </ul>

 <xsl:call-template name="for.loop">   <xsl:with-param name="i">1</xsl:with-param>   <xsl:with-param name="count"

select="ceiling($numberOfItems div $itemsToDisplay)">

 </xsl:template>

<xsl:template name="for.loop">
            <xsl:param name="i"/>
            <xsl:param name="count"/>

            <xsl:if test="$i &lt;=$count">
                    <xsl:if test="$pageNumber!= $i">
                            <a href="?page={$i}#about" ><xsl:value-of select="$i" /></a>
                    </xsl:if>

                    <xsl:if test="$pageNumber = $i">
                      <a  class="selected"><xsl:value-of select="$i"/></a>
                    </xsl:if>

                    <xsl:call-template name="for.loop">
                            <xsl:with-param name="i" select="$i + 1" />
                            <xsl:with-param name="count" select="$count">
                            </xsl:with-param>
                    </xsl:call-template>
            </xsl:if> </xsl:template>

Regarding this line of code

Copy Link

is working on a reply...

Flag this post as spam?

Separating 10 articles per page?