Click here to Skip to main content
Email Password   helpLost your password?

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:

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();
}

The event arguments provided are:

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

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
Generala thank you
vivekmunde
22:22 19 Oct '08  
hi,
i was lookin 4 somethin like this.

reason is, we r not fetchin all d records at a time and so could not use .net pagin in built with grid.

thank you very much ... ur control is runnin smooth in my application

regards,
vivek
Questioni can not run your source code
nkmnkmnkmnkm
2:07 30 Sep '08  
i can not run your source code It Shows the following error " Could not load type 'ThapWebControls.Pager' ". How to rectify this problem???
AnswerRe: i can not run your source code
Tony Williams
2:05 7 Oct '08  
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
MaxFire
23:46 31 Aug '08  
it throws a compiler error message: CS0501: 'ThapWebControls.Pager.FirstText.get' must declare a body because it is not marked abstract or extern
public string FirstText
{
get; set;
}

how do i fix it? D'Oh!
GeneralRe: i can not run your source code
Tony Williams
2:59 2 Sep '08  
It's an automatic property for c# 3.0, to fix it you can create an internal variable "string firstText;" and replace get with "get{return firstText;}" and set with "set{firstText = value;}"

and that should do it.

Let me know how you get on

Cheers
Tony
QuestionInteresting Approach
stixoffire
10:32 12 Aug '08  
I am wondering if you had a look at the collectionpager control on this site? It works well for most situations - although I would say URL-rewriting is a bit of a dilemna for it - but with some tweeking I am sure that can be overcome.

Although from what I see about your approach it appears to be a nice control as well - I have not tried it yet - but I might if it works with URL rewriting.
AnswerRe: Interesting Approach
Tony Williams
10:42 12 Aug '08  
No but now that you've mentioned it I'll have a peek at it as soon as I can.
GeneralRe: Interesting Approach
stixoffire
5:00 13 Aug '08  
I should have posted the link in my earlier comments:
http://www.codeproject.com/KB/custom-controls/CollectionPager.aspx[^]
GeneralLooks Good. But...
Ayyanar
6:04 12 Aug '08  
Its looking good. but i have one doubt.

Why you are displaying page number as 0? minimum is 1.

Thanks

Ayyanar. J
Senior Software Engineer
Avinaya Information Systems
Puducherry
India

GeneralRe: Looks Good. But...
Tony Williams
10:31 12 Aug '08  
If you could point me to where this is I'll sort it out. It was worked on quite fast so there are bound to be the odd mistake.

Thanks and Regards
Tony
GeneralRe: Looks Good. But...
Ayyanar
20:39 12 Aug '08  
HTML Source:

<uc1:Pager ID="pager" runat="server" Separator=" | " FirstText="First"
PreviousText="<" NextText=">" LastText="Last" PageSize="10" NumberOfPages="10" OnChange="Pager_Changed" />


Code Behind:
if (!IsPostBack)
{
pager.TotalPages = 200;
pager.GenerateLinks();
}


OUTPUT:
Paging displayes starts with 0 initially like

0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10


I think its better to starts with 1 instead of 0. your thoughts on this.

Ayyanar. J
SPi
India

GeneralRe: Looks Good. But...
Tony Williams
22:37 12 Aug '08  
Hmmm...... I'm assuming the CurrentPage has not been set (0 would then be default) which might explain why it is being displayed. - I'll have a look at it later today and make the changes.

Thanks for spotting that btw

Tony
General[Message Removed]
Mojtaba Vali
19:25 8 Aug '08  
Spam message removed
GeneralRe: what about Goto Page?
Tony Williams
10:31 12 Aug '08  
Sorry for the delay in replying - I'll get working on it as soon as I can.
GeneralScreenshot
Jacquers
4:31 7 Aug '08  
Can you please add a screenshot so people can see how the control looks?


Last Updated 21 Oct 2008 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2010