Question

I have implemented this pager based on the nerddinner tutorial.

I had previously set this up to list all the pages in between the first and last links, however this is growing out of control now 🙂 In the below example I have the HTML / Code nuggets for the paging. I now have the page number list in between the First, and Last links reduced to just 10.

This does not change however. It will still list 1-10 regardless of the page I am on. I would like it to display links for the next 10 pages. Any help would be appreciated!

<ul id="paginator">
    <% if (Model.HasPreviousPage)
       { %>
    <li>
        <%= Html.RouteLink("First Page", new { namespaces = "Admin", controller = "Products", action = "ViewAll", page = 0 })%></li>
    <% } %>
    <% else %>
    <% { %>
    <li>First Page</li>
    <% } %>
    <% for (int i = 0; i < 10; i++) %>
    <% { %>
    <% if (i == Model.PageIndex) %>
    <% { %>
    <li>
        <%: i+1 %></li>
    <% } %>
    <% else %>
    <% { %>
    <li>
        <%= Html.RouteLink((i + 1).ToString(), new { namespaces = "Admin", controller = "Products", action = "ViewAll", page = i })%>
    </li>
    <% } %>
    <% } %>-->
    <% if (Model.HasNextPage)
       { %>
    <li>
        <%= Html.RouteLink("Last Page", new { namespaces = "Admin", controller = "Products", action = "ViewAll", page = Model.TotalPages - 1 })%></li>
    <% } %>
    <% else %>
    <% { %>
    <li>Last Page</li>
    <% } %>
</ul>

Answer 1

You can use your current page to decide where to place your 10 items, ideally I imagine you would want to display 5 pages either side of the current page (or ‘n’ pages either side of the current page). The algorithm for this is reasonably easy to implement…

var startingPage = currentPage - 5;
var endingPage = currentPage + 5;

The only complication to add to this is that if the starting page is less than 1, or the ending page is greater than the final page, you’ll need to shim your 10 results.

Lastly, you would need to handle the case where there aren’t 11 pages of results!

var startingPage = currentPage - 5;
if (startingPage < 1) {
    startingPage = 1;
}

var endingPage = currentPage + 11;
if (endingPage > numberOfPages) {
    endingPage = numberOfPages;
}

You now have the start and end of your loop to create the page links, with the current page in the middle except at the start and end of paging.

for (int i = startingPage; i < endingPage; i++)

You could move the hard-coded values out of this code and shorten the expressions in your production code – I have done things in the way I think will make the concept easiest.

I would also recommend moving this logic into a helper class that can create page links wherever you need them if you have more than one page that needs this logic.