bx

Simple & Flexible Paging

.NET

Paging is one of those things we take for granted. We see it everywhere, at the bottom of our google results, forum pages and even on my blog. Personally I’m not satisfied with having a list of 101 page numbers at the bottom of my page. It’s not what we expect from a site these days and it’s simply ugly. I prefer only to display 5 page numbers at a time with a first, previous, next & last button.


Source Code: github

The following example is written in C# but can really be ported into any language. First we need a start and end range for our paging. The method below will return a dictionary with “PageStarting” & “PageEnding” to be used when generating the HTML. The method takes in 3 paramaters, first is the current page the user is on, the total number of pages and the number of page numbers you would like displayed to the screen (this works much nicer if you use an odd number, so that you always have an even number of page numbers in front and at the end of the current page). 

protected Dictionary<string, int> PagingRange { get; set; }
protected int CurrentPage;
protected int PageCount;

protected void Page_Load(object sender, EventArgs e)
{
    int.TryParse(Request.QueryString["page"], out CurrentPage);
    CurrentPage = CurrentPage < 1 ? 1 : CurrentPage;
    PageCount = 100;

    PagingRange = GetPagingRange(CurrentPage, PageCount, 5);
}

public static Dictionary<string, int> GetPagingRange(int currentPage, int pageCount, int pagingLimit)
{
    int pagingStart;
    int pagingEnd;
    var pagingRange = new Dictionary<string, int>();

    if (pageCount >= pagingLimit)
    {
	    if (currentPage <= (pagingLimit / 2))
	    {
	        pagingStart = 1;
	        pagingEnd = pagingLimit;
	    }
	    else if (currentPage > pageCount - (pagingLimit / 2))
	    {
	        pagingStart = pageCount - (pagingLimit - 1);
	        pagingEnd = pageCount;
	    }
	    else
	    {
	        pagingStart = currentPage - (pagingLimit / 2);
	        pagingEnd = pagingStart + (pagingLimit - 1);
	    }
    }
    else
    {
	    pagingStart = 1;
	    pagingEnd = pageCount;
    }

    pagingRange.Add("PagingStart", pagingStart);
    pagingRange.Add("PagingEnd", pagingEnd);

    return pagingRange;
}

The next thing we will need to do is use these values to render out the paging controls. Below is an example of how this can be done with the page range and the initial values we setup. You can however use these values to display the paging in whatever manner you want, the control is totally in your hands. 

<ul>
	<% if (CurrentPage > 1 ) { %>
		<li><a href="default.aspx?page=1">«</a></li>
		<li><a href="default.aspx?page=<%=CurrentPage-1%>">‹</a></li>
	<% } %>
	<% if (PagingRange["PagingStart"] > 1) { %>
		<li><span>…</span></li>
	<% } %>
	<% for (var i = PagingRange["PagingStart"]; i <= PagingRange["PagingEnd"]; ++i) { %>
		<% if (CurrentPage == i) { %>
			<li><span><%=CurrentPage%></span></li>
		<% } else { %>
			<li><a href="default.aspx?page=<%=i%>"><%=i%></a></li>
		<% } %>
	<% } %>
	<% if (PagingRange["PagingEnd"] < PageCount) { %>
		<li><span>…</span></li>
	<% } %>
	<% if (CurrentPage < PageCount) { %>
		<li><a href="default.aspx?page=<%=CurrentPage+1%>">›</a></li>
		<li><a href="default.aspx?page=<%=PageCount%>">»</a></li>
	<% } %>
</ul>
⇺ back