Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Anthony Candaele 1197 posts 2049 karma points
    May 22, 2013 @ 14:08
    Anthony Candaele
    0

    Razor Paging snippet

    Hi,

    I want to add paging navigation to a page. Does anyone know where I can find a good snippet of Paging using Razor ?

    Thanks for your help,

    Anthony

  • Jonas Eriksson 930 posts 1825 karma points
    May 22, 2013 @ 14:36
    Jonas Eriksson
    2

    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?

  • Lee Kelleher 3886 posts 14629 karma points MVP 9x admin c-trib
    May 22, 2013 @ 15:20
    Lee Kelleher
    101

    I used this blog post as a reference the other day.

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

    It's using the "old" style Razor, but I tweaked it for v6 MVC style.

  • Anthony Candaele 1197 posts 2049 karma points
    May 23, 2013 @ 09:36
    Anthony Candaele
    0

    Hi Lee, Jonas,

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

    greetings,

    Anthony

  • Meni 135 posts 157 karma points
    May 26, 2013 @ 20:15
  • Craig100 981 posts 2114 karma points c-trib
    Jun 24, 2013 @ 17:52
    Craig100
    0

    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

  • Lee Kelleher 3886 posts 14629 karma points MVP 9x admin c-trib
    Jun 24, 2013 @ 18:23
    Lee Kelleher
    9

    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.

  • Craig100 981 posts 2114 karma points c-trib
    Jun 24, 2013 @ 19:27
    Craig100
    6

    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

  • Thanh Tran Huy 22 posts 42 karma points
    Oct 31, 2013 @ 10:34
    Thanh Tran Huy
    0

    Hi all.

    Possible to paging in server side.

  • Amir Khan 995 posts 2013 karma points
    Feb 18, 2014 @ 18:49
    Amir Khan
    0

    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

  • Jason Espin 368 posts 1335 karma points
    Apr 23, 2014 @ 14:37
    Jason Espin
    1

    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.

  • Simon 692 posts 1067 karma points
    Apr 14, 2015 @ 22:21
    Simon
    0

    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

  • Arlan 58 posts 184 karma points
    Jul 21, 2015 @ 02:35
    Arlan
    1

    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>
    
  • Osman Coskun 145 posts 344 karma points
    Feb 04, 2016 @ 12:02
    Osman Coskun
    0

    It works nice and smooth. Thank you :)

  • Darren R 10 posts 73 karma points
    Oct 08, 2015 @ 18:44
    Darren R
    2

    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

  • phaedra 5 posts 88 karma points
    Apr 15, 2016 @ 14:59
    phaedra
    0

    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!

Please Sign in or register to post replies

Write your reply to:

Draft