How can I modify this to have a Google-like paging?

Question

My controller class contains

var Paged = new PaginatedList<Products>(SideBar, page ?? 0, pageSize);
if (Request.IsAjaxRequest()) 
{
     return PartialView("~/Views/Shared/_Grid.cshtml", Paged);
}
return View(Paged);

the PaginatedList is

public class PaginatedList<T> : List<T>
{

    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.Skip(PageIndex * PageSize).Take(PageSize));
    }

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

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

And my view is

<div class="pagination-container">
            <nav class="pagination">
                <ul>
                    @for (int i = 0; i < Model.TotalPages; i++)
                    {
                       <li><a href="@Url.Action("Index", "Home", new { page = i})" 
                          class="@(i == Model.PageIndex ? "current-page" : "")">@(i + 1)</a></li>
                    }
                </ul>
            </nav>

            <nav class="pagination-next-prev">
                <ul>
                    @if (Model.HasPreviousPage) {
                        <li><a href="@Url.Action("Index", "Home", new { page = (Model.PageIndex - 1) })" class="prev"></a></li>
                    }
                    @if (Model.HasNextPage) { 
                        <li><a href="@Url.Action("Index", "Home", new { page = (Model.PageIndex + 1) })" class="next"></a></li>
                    }
                </ul>
            </nav>
            <div>
                Page @(Model.PageIndex + 1) of @Model.TotalPages
            </div>
        </div>

One problem with the view above, is that it creates numeric pages equal to the page sizes within model. If the model has 6 pages the result is

What will happen if i have 100 Model.Pages ?

I'm not sure what your asking. Google just show 10 pages max and display the total count on the page. Is this what you want? — Paul Coghill, Sep 23 '15 at 16:34
@PaulCoghill Actually yes. Sorry, English is not my tongue language — OrElse, Sep 23 '15 at 16:42
No worries, hopefully I've got the question right in the answer below. — Paul Coghill, Sep 23 '15 at 16:49
I realized I'd messed up the answer, but I think it's right now. — Paul Coghill, Sep 23 '15 at 17:34

score 0 · Accepted Answer · edited May 23 '17 at 12:33

You need to make sure that you separate you're not returning all the data in the model - you return only return the page size, at most, and have a separate property to store the total count.

For instance:

public class PageResult<T> where T : class
{

    public PageResult(IEnumerable<T> items, int page = 1, int pageSize = 10)
    {
        this.Items = items;
        this.PageSize = pageSize;
        this.PageIndex = page;
        this.PaginateData(page);
    }

    public IEnumerable<T> Items { get; private set; }

    public int PageSize { get; private set; }

    public int PageIndex { get; private set; }

    public int Total { get; private set; }

    public int TotalPages
    {
        get
        {
            return Math.Max((int)Math.Ceiling((Total / (double)PageSize)), 1);
        }
    }

    private int _MaxPagesToDisplay = 10;

    public int MaxPagesToDisplay
    {
        get { return _MaxPagesToDisplay; }
        set { _MaxPagesToDisplay = value; }
    }

    public int PagesToDisplay
    {
        get
        {
            return Math.Min(this.MaxPagesToDisplay, TotalPages);
        }
    }

    public void PaginateData(int page)
    {
        if(this.Items == null) return;
        this.Total = this.Items.Count();
        this.Items = this.Items.Skip(this.PageSize * this.PageIndex - 1).Take(this.PageSize);
    }

}

This will mean you can return for example 1 million results and set the Total to 1 million, but only insert 10 into the Items collection. You can use Linq to paginate the data into this collection. I added the method PaginateData which does it for you.

Then you can update your view:

@for (int i = 1; i <= Model.PagesToDisplay; i++)
                    {
                       <li><a href="@Url.Action("Index", "Home", new { page = i})" 
                          class="@(i == Model.PageIndex ? "current-page" : "")">@(i)</a></li>
                    }

You can then use the Total field to display the total count on the page.

How can I modify this to have a Google-like paging?

1 Answers1