Created
February 23, 2017 12:04
-
-
Save nzhul/3e2e9bdf88dd1208dd6adf822d7a47a8 to your computer and use it in GitHub Desktop.
Collapsing Pager
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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