Umbraco pagination

Question

First time Umbraco user.

I'm looking to add pagination to the following basic loop:

@foreach (var example in CurrentPage.Children.OrderBy("createDate descending").Take(8)){

   //Do Stuff//

}

Any ideas? Thanks

Answer 1

After a good amount of work and research, here is my final code for pagination in umbraco. Replace the examples with your stuff, and pageSize is the amount of posts shown on each page.

@{
    var pageSize = 8;
    if(Model.Content.HasValue("numberOfItemsPerPage")){
    pageSize = Model.Content.GetPropertyValue<int>("numberOfItemsPerPage");}

    var page = 1; int.TryParse(Request.QueryString["page"], out page);
    var items = Umbraco.TypedContent(Model.Content.Id).Children.Where(x => x.DocumentTypeAlias == "exampleAlias" && x.IsVisible());
                var totalPages = (int)Math.Ceiling((double)items.Count() / (double)pageSize);

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

            foreach (var item in items.Skip((page - 1) * pageSize).Take(pageSize).OrderBy("createDate descending"))
{

     <div class="example-div">
            <h2>@item.GetPropertyValue("example")</h2>
    </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++)
            {
                <li class="@(p == page ? "active" : string.Empty)">
                    <a href="?page=@p">@p</a>
                </li>
            }
            @if (page < totalPages)
            {
                <li><a href="?page=@(page+1)">Next</a></li>
            }
        </ul>
    </div>
}
}

Hope this stops a headache for someone.

Answer 2

Phil's answer is great, but I would recommend putting the order on the items variable rather than the foreach - that way if any more complicated sorting is necessary it's being done before the pagination is implemented.

The updated code snippets would be:

@{
    var pageSize = 8;
    if(Model.Content.HasValue("numberOfItemsPerPage")){
    pageSize = Model.Content.GetPropertyValue<int>("numberOfItemsPerPage");}

    var page = 1; int.TryParse(Request.QueryString["page"], out page);
    var items = Umbraco.TypedContent(Model.Content.Id).Children.Where(x => x.DocumentTypeAlias == "exampleAlias" && x.IsVisible()).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;
    }

    foreach (var item in items.Skip((page - 1) * pageSize).Take(pageSize)
    {
        <div class="example-div">
            <h2>@item.GetPropertyValue("example")</h2>
        </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++)
               {
                   <li class="@(p == page ? "active" : string.Empty)">
                       <a href="?page=@p">@p</a>
                   </li>
               }
               @if (page < totalPages)
               {
                   <li><a href="?page=@(page+1)">Next</a></li>
               }
           </ul>
       </div>
    }
}

Answer 3

My 50 cents

Jeroen Breuer created a github project called Hybrid Framework in which he has added some route hijacking to an umbraco side to do paging and have strongly typed models. Take a look at it and i'm sure you will like it. It also uses caching i believe.

There was also a video about this i saw but i could not find it anymore.

Hope this helps people trying to implement Paging and some other nice stuff to you Umbraco projects.

UPDATE: found the video on GitHub in readme