How do I set the number of pages shown in a search for ASP.NET MVC3

Question

How can I shorten the number of pages shown in a list?

Currently when searching, the results page will show every number in the list e.g First Page 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, etc. to the Last Page. Some search results can have up to 40 pages so it looks a bit messy.

How can I change the code to show the pages like this e.g First Page 1, 2, 3,...9, 10. Last Page.

When page three is selected the list would show e.g First Page 3, 4, 5,...9, 10. Last Page.

I am working with .NET MVC3. This is the code being used to generate the view

    <%@ Control Language="C#"Inherits="System.Web.Mvc.ViewUserControl<MyApp.Web.Extensions.PaginatedList<MyApp.Data.Product>>" %>
<div style="text-align: center; margin-bottom: 5px;">
<ul id="paginator">
    <% if (Model.HasPreviousPage)
       { %>
    <li>
        <%= Html.RouteLink("First Page", new { namespaces = "Administrator", controller = "Products", action = "ViewAll", page = 0 })%></li>
    <% } %>
    <% else %>
    <% { %>
    <li>First Page</li>
    <% } %>
    <%-- Show all the pages here in a list --%>
    <% for (int i = 0; i < Model.TotalPages; i++) %>
    <% { %>
    <% if (i == Model.PageIndex) %>
    <% { %>
    <li>
        <%: i+1 %></li>
    <% } %>
    <% else %>
    <% { %>
    <li>
        <%= Html.RouteLink((i + 1).ToString(), new { namespaces = "Administrator", controller = "Products", action = "ViewAll", page = i })%>
    </li>
    <% } %>
    <% } %>
    <% if (Model.HasNextPage)
       { %>
    <li>
        <%= Html.RouteLink("Last Page", new { namespaces = "Administrator", controller = "Products", action = "ViewAll", page = Model.TotalPages - 1 })%></li>
    <% } %>
    <% else %>
    <% { %>
    <li>Last Page</li>
    <% } %>
</ul>
</div>

This code for the class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MyApp.Web.Extensions
{
public class PaginatedList<T> : List<T> where T : MyApp.Data.Product
{
    public int PageIndex { get; private set; }
    public int PageSize { get; private set; }
    public int TotalCount { get; private set; }
    public int TotalPages { get; private set; }

    public PaginatedList(IQueryable<T> source, int pageIndex, int pageSize)
    {
        PageIndex = pageIndex;
        PageSize = pageSize;
        TotalCount = source.Count();
        TotalPages = (int)Math.Ceiling(TotalCount / (double)PageSize);
        this.AddRange(source.OrderBy(t => t.CreatedDate).OrderByDescending(t => t.CreatedDate).Skip(PageIndex * PageSize).Take(PageSize));
    }

    public bool HasPreviousPage
    {
        get
        {
            return (PageIndex > 0);
        }
    }

    public bool HasNextPage
    {
        get
        {
            return (PageIndex + 1 < TotalPages);
        }
    }
  }
}

If additional information is needed please leave a comment. Also thank you in advance for any help offered.

Answer 1

this is what you are looking for ...

Paging with ASP.NET MVC

Answer 2

Use custom jquery paging. Below are some good examples...try any.

http://www.gowestwebdesign.com/demos/jquery-cycle-gallery-next-back-paging/#thedemo

http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm

http://www.freelancer.com/work/jquery-pagination-demo/

http://tympanus.net/jPaginate/