Hi!

Url-based paging? What about http://cultiv.nl/blog/2011/2/17/how-to-use-razor-in-umbraco-paging/ or do you like a javascripted version?

Hi Lee, Jonas,

Thanks for the advice. I implemented Dan Diplo's solution, and it works fine!

greetings,

Anthony

Hi, 

Try this example also:

http://umbraco.com/help-and-support/video-tutorials/umbraco-fundamentals/razor-recipes/news.aspx

Hi Lee,

I'm using MVC V6.1.1 and need to implement paging. However, I don't know how to "V6" Dan Diplo's solution. Could you share?

Tried looking at Warren's UmbTVcast on the subject but again it's for V4 so some of the stuff like .InGroupsOf(x) doesn't work (or I can't find it).

Cheers,

Craig

Hi Craig,

Here's a stripped-down version of the code I used:

@inherits UmbracoTemplatePage
@{Layout = "MasterTemplate.cshtml";}
@{
    var pageSize = 3;
    var page = 1; int.TryParse(Request.QueryString["p"], 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;
    }
    else if (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) ? "active" : string.Empty;
                    <li class="@active">
                        <a href="?page=@p">1</a>
                    </li>
                }
                @if (page < items.Count())
                {
                    <li><a href="?page=@(page+1)">Next</a></li>
                }
            </ul>
        </div>
    }
</div>

Hope it helps?

Cheers, Lee.

Hi Lee,

Many many thanks for this. It's helped me hugely.  Noticed a couple of minor issues that stopped it working properly so have added them in bold below.

@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@(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>

Thanks again.

Cheers,

Craig

Hi all.

Possible to paging in server side.

Has anyone ever adapted this to a more advanced pagination system for a ton of nodes where the pagination "hides" nodes too far from the current one?

Like 1 2 3 ...56 57 58

-Amir

Hi Amir,

You would do something along the lines of the following:

@if (totalPages > 1){
      <ul class="pager">
        @if (page > 1)
        {
          <li><a href="?page=@(page-1)">Previous</a></li>
        }
        @for (int p = 1; p < totalPages + 1; p++)
        {
          var linkClass = (p == page) ? "disabled" : "active";
          if (p == page){
            <li class="@Html.Raw(linkClass)"><a href="?page=@p">@p</a></li>
            previousPageIsEllipsis = false;
          }else{
            if( p == 1
                || p == page - 1
                || p == page + 1
                || p == totalPages - 1
                || p == totalPages){    
                  <li class="@Html.Raw(linkClass)"><a href="?page=@p">@p</a></li>
                  previousPageIsEllipsis = false;
                }else{
                  if (previousPageIsEllipsis){
                    continue;
                  }else{
                    <li><a href="#">...</a></li>
                    previousPageIsEllipsis = true;
                  }
                }
          }      
        }

        @if (page < totalPages)
        {
          <li><a href="?page=@(page+1)">Next</a></li>
        }
      </ul>
    }

This will display the first and last pages as well as a page either side of the current page. I hope this helps.

Hi All,

I am using the suggested pagination razor code snippet, as re-listed by Lee.

I want to include in the pagination such as showing: "Viewing 1 - 5 of 30 News" , "Viewing 6 - 10 of 30 News" for example.

Can someone help me.

Thank you.

Kind Regards

For Foundation Zurb 5

@{

    @*Pagination*@

    //Check macro param is not empty, if so default to 6 otherwise use the Parameter value
    //var itemsPerPage = String.IsNullOrEmpty(Parameter.noPerPage) ? 6 : int.Parse(Parameter.noPerPage);
    var itemsPerPage = 3;

    int currentPage = 1;

    if (!int.TryParse(HttpContext.Current.Request.QueryString["Page"], out currentPage))
    {
        //No querystring found or not a number, so set currentPage to 1
        currentPage = 1;
    }
    var documentTypeAlias = "NewsPage";

    var selection = CurrentPage.DescendantsOrSelf(documentTypeAlias).OrderBy("SortOrder desc");
    int selectionTotalItems = selection.Count();

    //Total Pages
    /*
        Divide the selectionTotalItems by itemsPerPage and then round the number up to 
        next whole number and add one to the result (eg: 5.1 = 6 + 1 = 7) 
    */
    var totalPages = (int)Math.Ceiling((double)selectionTotalItems / (double)itemsPerPage);
    var previousPageIsEllipsis = false;

    @*/Pagination*@   

}


@foreach (var item in selection.Skip((currentPage - 1) * itemsPerPage).Take(itemsPerPage))
{
//list pages
}

@{
              if (totalPages > 1)
              {
                      <ul class="pagination" role="menubar" aria-label="Pagination">
                          @* Loop through each page *@
                          @*Create a variable 'pages' that stores from 1 to the numberOfPages variable*@
                          @{var totalPagesRange = Enumerable.Range(1, (int)totalPages);
                          }
                          @*Loop through the items in the totalPagesRange variable*@
                          @foreach (var item in totalPagesRange)
                          {
                              @* Add left arrow *@
                              if (item == 1)
                              {
                                  if (item == currentPage || 0 == currentPage)
                                  {
                                        <li class="arrow unavailable" aria-disabled="true"><a href="#">&laquo; Previous</a></li>
                                  }
                                  else
                                  {
                                      <li class="arrow"><a href="?page=@(currentPage - 1)" title="Previous page">&laquo; Previous</a></li>
                                  }
                              }

                              if (item == currentPage
                                  || item == 1
                                  || item == currentPage - 2
                                  || item == currentPage - 1
                                  || item == currentPage + 1
                                  || item == currentPage + 2
                                  || item == totalPages)
                              {
                                  string current = (item == currentPage) ? "current" : String.Empty;

                                  if ((item == 1) && (currentPage == 1))
                                  {
                                    <li class="@current unavailable" aria-disabled="true">
                                        <a href="?page=@item" title="Go to page @item">@item</a>
                                    </li>

                                  }
                                  else
                                  {
                                      <li class="@current">
                                          <a href="?page=@item" title="Go to page @item">@item</a>
                                      </li>
                                  }
                                  previousPageIsEllipsis = false;
                              }
                              else
                              {
                                  if (previousPageIsEllipsis)
                                  {
                                      continue;
                                  }
                                  else
                                  {
                                      <li class="unavailable" aria-disabled="true">&hellip;</li>
                                      previousPageIsEllipsis = true;
                                  }
                              }

                              @* Add right arrow *@
                              if (item == totalPages)
                              {
                                  if (item == currentPage)
                                  {
                                      <li class="arrow unavailable" aria-disabled="true"><a href="">Next &raquo;</a></li>
                                  }
                                  else
                                  {
                                      <li class="arrow"><a href="?page=@(currentPage + 1)" title="Next page">Next &raquo;</a></li>
                                  }
                              }
                          }
                      </ul>
              }
              else
              {
                      <ul class="pagination">
                          <li class="current"><a href="">1</a></li>
                      </ul>
              }
          }
          <div class="pagination-current-items-per-page">
              <p>Viewing <span class="current-items">@(itemsPerPage * currentPage - itemsPerPage + 1) - @((itemsPerPage * currentPage < selectionTotalItems) ? itemsPerPage * currentPage : selectionTotalItems)</span> of @selectionTotalItems</p>
          </div>

if you are having as much fun as I did with some of the codes above (Craig100's) or the one before that (Lee Kelleher) double-check that the html tags are closed correctly. The code works great after modifying for what I need it to do, but don't copy and paste it verbatim, close your html tags first

Thanks for all the help I found here!

I'm having trouble converting this if/else into a ternary and was wondering if anyone had any tips? I can't manage to escape the HTML properly.

Working:

@if (page > 1)
{
    @Html.Raw("<a href=\"?page=")@(page - 1)@Html.Raw("\">Prev</a>")
}
else
{
    @Html.Raw("Prev");
}

Not working (& every variation I've tried):

@(page > 1) ? @Html.Raw("<a href=\"?page=")@(page - 1)@Html.Raw("\">Prev</a>") : @Html.Raw("Prev");

Renders (or something similar):

False ? Prev : Prev; }

<li>False ? <a href="?page=0">Prev</a> : Prev; }</li>

Full pagination logic below

I'm displaying a limited range of pages that centers the current page:

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@{
    Layout = "WSMaster.cshtml";

   var currCatId = Convert.ToString(CurrentPage.id);
   var items = CurrentPage.Site().Children("article").Where("Visible && primaryCategory.Equals(@0) || categories.Contains(@0)", currCatId).OrderBy("Promoted desc, CreateDate desc");

var pageSize = 10;
var page = 1; int.TryParse(Request.QueryString["page"], out page);
var totalPages = (int)Math.Ceiling((double)items.Count() / (double)pageSize);

if (page > totalPages)
{
    page = totalPages;
}
else if (page < 1)
{
    page = 1;
}
    var range = (totalPages >= 5) ? 5 : totalPages;
    var rangeOffset = page + 3;
    var pAdjusted = page - 2;
    //int start = (currentPage - window) < 0 ? (currentPage - window) : 1;
    if (page < range - 2)
    {
        pAdjusted = 1;
        rangeOffset = range + 1;
    }
    else if (rangeOffset > totalPages)
    {
        pAdjusted = totalPages - range + 1;
        rangeOffset = totalPages + 1;
    }

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

Thanks for any advice!

is working on a reply...