locked
Managing Long Pagination RRS feed

Answers

  • User1526116210 posted

    Keep in mind that this code is just to give you an idea of how to do it, this may or may not work for you and you will need to change the HTML to match your layout. The general idea in this solution is if there are less than 10 pages, just display a separate link to each of them (as what you got from Mike's article). Then, if there's more than 10 links, display next and previous page links as well as links to the "surrounding" 10 pages.

    if (TotalPages > 0)
    {
        if (TotalPages <= 10)
        {
            <ul class="pagination">
                @if (PageNumber > 1)
                {
                    <li><a href="~/PaginatedPage/Page/@(PageNumber - 1)">&laquo; Previous</a></li>
                }
                @for (int i = 0; i < TotalPages; i++)
                {
                    <li><a href="~/PaginatedPage/Page/@i">@i</a></li>
                }
                @if (PageNumber < TotalPages)
                {
                    <li><a href="~/PaginatedPage/Page/@(PageNumber + 1)">Next &raquo;</a></li>
                }
            </ul>
        }
        else
        {
            <ul class="pagination">
                @if (PageNumber > 1)
                {
                    <li><a href="~/PaginatedPage/Page/@(PageNumber - 1)">&laquo; Previous</a></li>
                }
                @for (int i = PageNumber; i < PageNumber + 10; i++)
                {
                    <li><a href="~/PaginatedPage/Page/@i">@i</a></li>
                }
                @if (PageNumber < TotalPages)
                {
                    <li><a href="~/PaginatedPage/Page/@(PageNumber + 1)">Next &raquo;</a></li>
                }
            </ul>
        }
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 16, 2014 12:11 PM

All replies

  • User1526116210 posted

    Keep in mind that this code is just to give you an idea of how to do it, this may or may not work for you and you will need to change the HTML to match your layout. The general idea in this solution is if there are less than 10 pages, just display a separate link to each of them (as what you got from Mike's article). Then, if there's more than 10 links, display next and previous page links as well as links to the "surrounding" 10 pages.

    if (TotalPages > 0)
    {
        if (TotalPages <= 10)
        {
            <ul class="pagination">
                @if (PageNumber > 1)
                {
                    <li><a href="~/PaginatedPage/Page/@(PageNumber - 1)">&laquo; Previous</a></li>
                }
                @for (int i = 0; i < TotalPages; i++)
                {
                    <li><a href="~/PaginatedPage/Page/@i">@i</a></li>
                }
                @if (PageNumber < TotalPages)
                {
                    <li><a href="~/PaginatedPage/Page/@(PageNumber + 1)">Next &raquo;</a></li>
                }
            </ul>
        }
        else
        {
            <ul class="pagination">
                @if (PageNumber > 1)
                {
                    <li><a href="~/PaginatedPage/Page/@(PageNumber - 1)">&laquo; Previous</a></li>
                }
                @for (int i = PageNumber; i < PageNumber + 10; i++)
                {
                    <li><a href="~/PaginatedPage/Page/@i">@i</a></li>
                }
                @if (PageNumber < TotalPages)
                {
                    <li><a href="~/PaginatedPage/Page/@(PageNumber + 1)">Next &raquo;</a></li>
                }
            </ul>
        }
    }

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, June 16, 2014 12:11 PM
  • User2129316869 posted

    Thanks a lot. I really appreciate

    Tuesday, June 17, 2014 4:51 AM