how to set a 9 pages shows in the pagination with the even in the inverse - Using Umbraco and getting started

Aaron Barboza 4 posts 74 karma points

Aug 02, 2018 @ 06:54

How to set a 9 pages shows in the pagination with the ..... even in the inverse

I used a code recomendations from a github contribuitor and works very good. But all the pages when incresing the pagination buttons works as infinite regeneration, what I mean is how can I do this as example:

Prev 123456789...Next and when is selected the page 5 for example shows like this:

Prev 5 6 7 8 9 10 11 12 13 ... Next and in the inverse or last page like this:

Prev ... 47 48 49 50 51 52 53 54 55

What I mean guys is to have just a 9 pages on click in the pagination buttons, but I need to implement with the same code :

@{
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>
}
}

Just to have a limit of 9 pages with the (...) according the page position.

Help!

Copy Link

Paul Wright (suedeapple) 277 posts 704 karma points

Aug 02, 2018 @ 20:18

Something like this might be helpful ;-)

https://weblogs.asp.net/jeff/paging-links-in-asp-net-mvc

Copy Link

Mila Pandurska 75 posts 354 karma points

Aug 03, 2018 @ 14:33

Hi, Aaron, First you need 4 new properties:

int StartPage;
int EndPage;
bool ShowFirstButton;
bool ShowLastButton;
groupSize = 9;
pageNumber = page;

Then you need to fill those fields:

            int middlePageNumber = (int)(Math.Ceiling((decimal)groupSize / 2));
            int pagesBeforeMiddle = groupSize - (int)middlePageNumber;
            int pagesAfterMiddle = groupSize - (pagesBeforeMiddle + 1);
            int StartPage = 1;
            if (pageNumber > middlePageNumber)
            {
                StartPage = pageNumber - pagesBeforeMiddle;
            }
            else
            {
                pagesAfterMiddle = groupSize - pageNumber;
            }
            int EndPage = pageCount;
            if (pageCount >= (pageNumber + pagesAfterMiddle))
            {
                EndPage = (pageNumber + pagesAfterMiddle);
            }
            ShowFirstButton= StartPage > 1;
            ShowLastButton = EndPage < pageCount;

And then in show the pagination:

 <ul class="pagination">
                    @if (ShowFirstButton)
                    {
                            <li><a href="url?page=1">First</a></li>
                     }
                    @if (pageNumber > 1)
                    {
                            <li><a href="url?page=@(pageNumber-1)">Prev</a></li>
                    }
                   @if (StartPage != EndPage)
                    {
                        for (int i = StartPage; i <= EndPage; i++)
                        {
                               <li><a href="url?page=@i>@i</a></li>
                         }
                    }

                   @if (pageNumber < TotalPages)
                    {
                            <li><a href="url?page=@(pageNumber+1)">Next</a></li>
                    }

                    @if (ShowLastButton)
                    {
                            <li><a href="url?page=@(TotalPages)">Last</a></li>
                   }

Copy Link

Aaron Barboza 4 posts 74 karma points

Sep 16, 2018 @ 21:32

Hi! Thanks for the recomendation! I'm back with that project! So, this avoid the infinite loop of pagination in the controls converting to ... and in the end just shows the final pages number instead continuing asigning new pages buttons in the end?

Copy Link

is working on a reply...

Flag this post as spam?

How to set a 9 pages shows in the pagination with the ..... even in the inverse