Skip to content

Instantly share code, notes, and snippets.

@nzhul
Created February 23, 2017 12:04
Show Gist options
  • Save nzhul/3e2e9bdf88dd1208dd6adf822d7a47a8 to your computer and use it in GitHub Desktop.
Save nzhul/3e2e9bdf88dd1208dd6adf822d7a47a8 to your computer and use it in GitHub Desktop.
Collapsing Pager
@using Web.Widgets.Search.Mvc.Models.View;
@model PagingData
<ul class="pagination">
@if (Model.DisplayPrev)
{
<li><a class="prev-page-url" href="@Model.PrevUrl">Previous</a></li>
}
@foreach (var urlItem in Model.Urls)
{
string isSelectedValue = urlItem.IsSelected == true ? "class=page-selected" : "";
if (!string.IsNullOrEmpty(urlItem.Url))
{
<li @isSelectedValue><a href="@urlItem.Url">@urlItem.Text</a></li>
}
else
{
<li><span>...</span></li>
}
}
@if (Model.DisplayNext)
{
<li><a class="next-page-url" href="@Model.NextUrl">Next</a></li>
}
</ul>
<style>
ul.pagination > li a:hover {
background-color: #e2e2e2;
}
ul.pagination {
margin-top: 20px;
}
ul.pagination > li {
position: static;
padding-left: 0px;
margin-bottom: 0px;
float: left;
margin: 30px 0 0 5px;
font-size:14px
}
ul.pagination > li:before {
content: none;
}
ul.pagination > li span {
display: block;
width: 40px;
text-align: center;
height: 45px;
line-height: 45px;
}
ul.pagination > li a {
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
display: block;
color: #999999;
}
ul.pagination > li.page-selected a {
border: 1px solid #cacaca;
color: black;
}
ul.pagination > li a.next-page-url, ul.pagination > li a.prev-page-url {
width: 100px;
border: 1px solid #cacaca;
color:black;
}
</style>
using System;
using System.Collections.Generic;
using System.Web;
using Web.Core.HttpUtilities.Url;
namespace Web.Widgets.Search.Mvc.Models.View
{
public class PagingData
{
public int TotalResultsCount { get; set; }
public int PagesCount
{
get
{
return (int)Math.Ceiling((double)this.TotalResultsCount / (double)this.PageSize);
}
}
public int PageSize { get; set; }
public bool DisplayPrev
{
get
{
if (this.CurrentPage < 2)
{
return false;
}
else
{
return true;
}
}
}
public string PrevUrl
{
get
{
Uri pageUrl = new Uri(this.Context.Request.Url.ToString());
return this.AddOrUpdatePageQueryParam(pageUrl, (this.CurrentPage - 1).ToString()).ToString();
}
}
public string NextUrl
{
get
{
Uri pageUrl = new Uri(this.Context.Request.Url.ToString());
return this.AddOrUpdatePageQueryParam(pageUrl, (this.CurrentPage + 1).ToString()).ToString();
}
}
public int CurrentPage
{
get
{
if (this.Context != null && !string.IsNullOrEmpty(this.Context.Request.QueryString["page"]))
{
int page = 1;
int.TryParse(this.Context.Request.QueryString["page"], out page);
return page;
}
else
{
return 1;
}
}
}
public bool DisplayNext
{
get
{
if (this.CurrentPage < this.PagesCount - 1)
{
return true;
}
else
{
return false;
}
}
}
public int LinksRadius { get; set; }
public ICollection<PageUrlItem> Urls { get; set; }
public HttpContextBase Context { get; private set; }
public PagingData(int resultsCount, int pageSize, int linksRadius, HttpContextBase context)
{
this.Context = context;
this.PageSize = pageSize;
this.TotalResultsCount = resultsCount;
this.LinksRadius = linksRadius;
this.Urls = this.GenerateUrls();
}
private ICollection<PageUrlItem> GenerateUrls()
{
ICollection<PageUrlItem> urls = new List<PageUrlItem>();
for (int i = 1; i < this.PagesCount + 1; i++)
{
if (i == 1 && this.ShouldRenderStartDosts(i))
{
// Render the first item
PageUrlItem urlItem = this.CreatePageUrlItem(i);
urls.Add(urlItem);
PageUrlItem dotsItem = this.CreateDotsItem();
urls.Add(dotsItem);
}
else if (i == this.PagesCount && this.ShouldRenderEndDots(i))
{
PageUrlItem dotsItem = this.CreateDotsItem();
urls.Add(dotsItem);
// Also render the last page item;
PageUrlItem urlItem = this.CreatePageUrlItem(i);
urls.Add(urlItem);
}
if (this.IsWithinRange(i))
{
PageUrlItem urlItem = this.CreatePageUrlItem(i);
urls.Add(urlItem);
}
}
return urls;
}
private PageUrlItem CreateDotsItem()
{
PageUrlItem item = new PageUrlItem();
item.Url = string.Empty;
item.Text = "...";
return item;
}
private PageUrlItem CreatePageUrlItem(int i)
{
Uri pageUrl = new Uri(this.Context.Request.Url.ToString());
pageUrl = this.AddOrUpdatePageQueryParam(pageUrl, i.ToString());
PageUrlItem urlItem = new PageUrlItem();
urlItem.Url = pageUrl.ToString();
urlItem.IsSelected = i == this.CurrentPage ? true : false;
urlItem.Text = i.ToString();
return urlItem;
}
private bool IsWithinRange(int pageIndex)
{
if ((this.CurrentPage + this.LinksRadius) >= pageIndex && (this.CurrentPage - this.LinksRadius) <= pageIndex)
{
return true;
}
else
{
return false;
}
}
private bool ShouldRenderEndDots(int pageIndex)
{
if ((this.CurrentPage + this.LinksRadius) >= pageIndex && (this.CurrentPage - this.LinksRadius) <= pageIndex)
{
return false;
}
else
{
return true;
}
}
// PageIndex will always be == 1
private bool ShouldRenderStartDosts(int pageIndex)
{
if ((this.CurrentPage - this.LinksRadius) <= pageIndex)
{
return false;
}
else
{
return true;
}
}
private Uri AddOrUpdatePageQueryParam(Uri pageUrl, string value)
{
if (string.IsNullOrEmpty(this.Context.Request.QueryString["page"]))
{
pageUrl = pageUrl.AddQueryParamValue("page", value);
}
else
{
pageUrl = pageUrl.UpdateQueryParamValue("page", value);
}
return pageUrl;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment