Click here to Skip to main content
15,867,594 members
Articles / Web Development / ASP.NET
Article

A Basic ASP.NET Pager Control

Rate me:
Please Sign up or sign in to vote.
4.36/5 (11 votes)
21 Oct 2008LGPL33 min read 67.3K   1.5K   32   18
A basic ASP.NET Pager User Control

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 Repeaters 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:

ASP.NET
<%@ Register Src="Pager.ascx" TagName="Pager" TagPrefix="userControl" %>

Now, add this line:

ASP.NET
<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 links
  • FirstText: 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 code
  • NumberOfPages: 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:

C#
protected void Page_Load(object sender, EventArgs e)
{
	/*Either populate the data using one of the lines */
	PopulateDataSource(1, this.Pager.PageSize);

	/*OR*/
	this.Page.GenerateLinks();
}

protected void Pager_Changed(object sender, PagerEventArgs e)
{
    PopulateDataSource(e.Number, e.PageSize);
}

 private void PopulateDataSource(int page, int pageSize)
{
    // This bit is purely to have some data. usually this
    // would be from a database/XML file etc.
    var data = new List<String>();

    for (int i = 0; i < 20; i++)
    {
        data.Add(i.ToString());
    }

    //Set the repeater with a "page" of data
    this.RepeaterData.DataSource =
         data.Skip((page - 1) * pageSize).Take(pageSize);
    this.RepeaterData.DataBind();

    //Calculates how many pages of a given size are required
    this.Pager.TotalPages =
         (data.Count / pageSize) + (data.Count % pageSize > 0 ? 1 : 0);

    this.Pager.GenerateLinks();
}
  • Pager.TotalPages: Required to correctly display the number links
  • Pager.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 clicked
  • Previous: A boolean indicating whether the "previous link" has been clicked
  • Next: A boolean indicating whether the "next link" has been clicked
  • Last: A boolean indicating whether the "last link" has been clicked
  • PageSize: The page size you set previously
  • CurrentPageNumber: 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:

Pager.jpg

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
    • First release

License

This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)


Written By
Software Developer (Senior) Thap
United Kingdom United Kingdom
Software Developer for Thap in Middlesbrough, UK.
Former Ice-cream man too.

Comments and Discussions

 
QuestionI love it! Pin
FlexDotNet19-Jun-14 9:21
FlexDotNet19-Jun-14 9:21 
GeneralMy vote of 5 Pin
shanawazway20-Mar-13 20:53
shanawazway20-Mar-13 20:53 
Generalskip function with dataset Pin
Member 78960844-May-11 4:59
Member 78960844-May-11 4:59 
Generala thank you Pin
vivekmunde19-Oct-08 21:22
vivekmunde19-Oct-08 21:22 
Questioni can not run your source code Pin
nkmnkmnkmnkm30-Sep-08 1:07
nkmnkmnkmnkm30-Sep-08 1:07 
AnswerRe: i can not run your source code Pin
Tony Williams7-Oct-08 1:05
Tony Williams7-Oct-08 1:05 
Generali can not run your source code Pin
MaxFire31-Aug-08 22:46
MaxFire31-Aug-08 22:46 
GeneralRe: i can not run your source code Pin
Tony Williams2-Sep-08 1:59
Tony Williams2-Sep-08 1:59 
QuestionInteresting Approach Pin
stixoffire12-Aug-08 9:32
stixoffire12-Aug-08 9:32 
AnswerRe: Interesting Approach Pin
Tony Williams12-Aug-08 9:42
Tony Williams12-Aug-08 9:42 
GeneralRe: Interesting Approach Pin
stixoffire13-Aug-08 4:00
stixoffire13-Aug-08 4:00 
GeneralLooks Good. But... Pin
Ayyanar12-Aug-08 5:04
Ayyanar12-Aug-08 5:04 
GeneralRe: Looks Good. But... Pin
Tony Williams12-Aug-08 9:31
Tony Williams12-Aug-08 9:31 
GeneralRe: Looks Good. But... Pin
Ayyanar12-Aug-08 19:39
Ayyanar12-Aug-08 19:39 
GeneralRe: Looks Good. But... Pin
Tony Williams12-Aug-08 21:37
Tony Williams12-Aug-08 21:37 
General[Message Removed] Pin
Mojtaba Vali8-Aug-08 18:25
Mojtaba Vali8-Aug-08 18:25 
GeneralRe: what about Goto Page? Pin
Tony Williams12-Aug-08 9:31
Tony Williams12-Aug-08 9:31 
GeneralScreenshot Pin
Jacquers7-Aug-08 3:31
Jacquers7-Aug-08 3:31 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.