Click here to Skip to main content
Click here to Skip to main content

A Basic ASP.NET Pager Control

, 21 Oct 2008
Rate this:
Please Sign up or sign in to vote.
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:

<%@ 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 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:

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)

About the Author

Tony Williams
Software Developer (Senior) Thap
United Kingdom United Kingdom
Software Developer for Thap in Middlesbrough, UK.
Former Ice-cream man too.
Follow on   Twitter   Google+

Comments and Discussions

 
QuestionI love it! PinmemberFlexDotNet19-Jun-14 9:21 
GeneralMy vote of 5 Pinmembershanawazway20-Mar-13 20:53 
Generalskip function with dataset PinmemberMember 78960844-May-11 4:59 
Generala thank you Pinmembervivekmunde19-Oct-08 21:22 
Questioni can not run your source code Pinmembernkmnkmnkmnkm30-Sep-08 1:07 
AnswerRe: i can not run your source code PinmemberTony Williams7-Oct-08 1:05 
Sorry for the delay in response, you could try to change the namespace "ThapWebControls" to your project namespace OR including the "ThapWebControls" namespace in your project.
 
Regards
Tony
Generali can not run your source code PinmemberMaxFire31-Aug-08 22:46 
GeneralRe: i can not run your source code PinmemberTony Williams2-Sep-08 1:59 
GeneralLooks Good. But... PinmemberAyyanar12-Aug-08 5:04 
GeneralRe: Looks Good. But... PinmemberTony Williams12-Aug-08 9:31 
GeneralRe: Looks Good. But... PinmemberAyyanar12-Aug-08 19:39 
GeneralRe: Looks Good. But... PinmemberTony Williams12-Aug-08 21:37 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 21 Oct 2008
Article Copyright 2008 by Tony Williams
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid