Introduction
This control provides a simple method for adding paging functionality to your ASP.NET site. The control itself is not "attached" to any data source; instead, that is left up to you, the developer, to take care of.
Background
I currently work for a Web development company (Thap) in Middlesbrough, UK, and was working on a project that required paging in several parts. The project was using Repeater
s for displaying data that the pager would work with, but after unsuccessfully searching for existing controls that meet the project's requirements, I decided to build a paging control myself.
Thap has graciously granted me permission to release the code on to this site under the LGPL license.
Using the Code
Implementing the control is very simple: either include the files in your project, or copy and paste what you need.
To add the control to the page, include the following line at the top:
<%@ Register Src="Pager.ascx" TagName="Pager" TagPrefix="userControl" %>
Now, add this line:
<userControl:Pager ID="Pager" runat="server" Separator=" | " FirstText="First"
PreviousText="<" NextText=">" LastText="Last" PageSize="2" NumberOfPages="3"
ShowGoTo="True" OnChange="Pager_Changed" />
Here is a list of the properties you can set:
Separator
: Specify the string
that is to appear between the number linksFirstText
: String
to be used for the "first button". Default is "|<
"PreviousText
: String
to be used for the "previous button". Default is "<
"NextText
: String
to be used for the "next button". Default is ">
"LastText
: String
to be used for the "last button". Default is ">|
"PageSize
: A handy place to store your page sizes, not used in the codeNumberOfPages
: The number of page links to display in between the previous/next links.ShowGoTo
: Displays the GoTo
functionality.
The next thing to do is take care of the code-behind by listening to the OnChange
event:
protected void Page_Load(object sender, EventArgs e)
{
PopulateDataSource(1, this.Pager.PageSize);
this.Page.GenerateLinks();
}
protected void Pager_Changed(object sender, PagerEventArgs e)
{
PopulateDataSource(e.Number, e.PageSize);
}
private void PopulateDataSource(int page, int pageSize)
{
var data = new List<String>();
for (int i = 0; i < 20; i++)
{
data.Add(i.ToString());
}
this.RepeaterData.DataSource =
data.Skip((page - 1) * pageSize).Take(pageSize);
this.RepeaterData.DataBind();
this.Pager.TotalPages =
(data.Count / pageSize) + (data.Count % pageSize > 0 ? 1 : 0);
this.Pager.GenerateLinks();
}
Pager.TotalPages
: Required to correctly display the number linksPager.GenerateLinks()
: Use this to generate the links if changes are made, such as the currentPageNumber
is changed (either by you, or when the OnChange
event is fired)
The event arguments provided are:
First
: A boolean indicating whether the "first link" has been clickedPrevious
: A boolean indicating whether the "previous link" has been clickedNext
: A boolean indicating whether the "next link" has been clickedLast
: A boolean indicating whether the "last link" has been clickedPageSize
: The page size you set previouslyCurrentPageNumber
: The number of the current page; this auto increments/decrements when the first/last/previous/next link is clicked
Points of Interest
Currently, the pager is only a user control mainly due to the fact that there was not enough time to bundle it in a library, but this may change in the future.
The numbered links between the Previous
and Next
links will be generated with the CurrentPageNumber
in the middle. So, if you have set NumberOfPages
to 21
and CurrentPageNumber
to 30
, then it will display 20
...30
...40
.
And, below is an example of how the control could look:
History
- 21st October, 2008
- Fixed small non-breaking bug in the code and several mistakes in the article
- 14th August, 2008
- Fixed bug pointed out by Ayyanar
- Added
GoTo
functionality requested by Mojtaba Vali - Added a sample page with the control in use
- 7th August, 2008