Click here to Skip to main content
16,021,459 members
Articles / Web Development / ASP.NET
Article

Pager Control for Repeater, DataList, or an Enumerable Collection

Rate me:
Please Sign up or sign in to vote.
4.79/5 (81 votes)
20 Oct 2005CPOL4 min read 775.8K   11.9K   166   290
This control acts as the middle man between a paged DataSet and your Repeater.

Introduction

Instead of trying to create an enhanced Repeater, I decided to make a separate control that would take care of paging. This CollectionPager acts as a middleman for a control (like the Repeater) and your data source (Dataset or Collection object). It uses the PagedDataSource class to accomplish this.

Having this functionality in a separate control allows you to add paging to any Web Control that accepts a data source. Also, you can place the CollectionPager wherever you want in relation to the control it is binding to.

Example of the Pager in action.

Navigation examples...

Example of the Pager in action.

Postback or QueryString option

This control also allows you to page through your collection with two different methods:

  1. QueryString. Use when you don't want/need to postback data. Through the control's properties, you can set a QueryString key to use. The default key is "Page".
  2. Postback. Use when you want/need to postback data. Helpful for when you want to maintain viewstate.

Using the Control

To use the control, simply add a reference to the complied DLL and put it in your toolbox. You can then drag it to your project. If you wish to do it by hand, it'll look something like this in your .aspx file....

ASP.NET
<%@ Register TagPrefix="cc1" Namespace="SiteUtils" 
  Assembly="CollectionPager" %>
<%@ Page language="c#" Codebehind="Example.aspx.cs" 
  AutoEventWireup="false" Inherits="CollectionPagerExample.WebForm1" %>
<HTML>
    <HEAD><TITLE>Collection Repeater Example</TITLE></HEAD>
    <BODY>
<DIV>
<ASP:LITERAL id=litDifferentResultsFormat runat="server"></ASP:LITERAL>
</DIV>
<DIV>
<ASP:LITERAL id=litTopPager runat="server"></ASP:LITERAL>
</DIV>

    <ASP:REPEATER id="Repeater1" runat="server">
        <HEADERTEMPLATE>
            <TABLE BORDER="1" CELLPADDING="3" CELLSPACING="0">
            <TR>
            <TH>Header1</TH>
            <TH>Header2</TH>
            <TH>Header3</TH>
            <TH>Header4</TH>
            <TH>Header5</TH>
            </TR>
        </HEADERTEMPLATE>
        <ITEMTEMPLATE><TR>
            <TD><%# DataBinder.Eval(Container.DataItem, "Column1") %></TD>
            <TD><%# DataBinder.Eval(Container.DataItem, "Column2") %></TD>
            <TD><%# DataBinder.Eval(Container.DataItem, "Column3") %></TD>
            <TD><%# DataBinder.Eval(Container.DataItem, "Column4") %></TD>
            <TD><%# DataBinder.Eval(Container.DataItem, "Column5") %></TD>
        </TR></ITEMTEMPLATE>
        <FOOTERTEMPLATE>
            </TABLE>
        </FOOTERTEMPLATE>
    </ASP:REPEATER>

    <CC1:COLLECTIONPAGER id="CollectionPager1" runat="server">
    </CC1:COLLECTIONPAGER>
    </BODY>
</HTML>

In your code behind, you just feed the CollectionPager1 object your data source. If you are using a DataSet as your data source, you will need to pass a DataView of it... for example:

C#
public class WebForm1 : System.Web.UI.Page 
{ 
    protected System.Web.UI.WebControls.Repeater Repeater1; 
    protected SiteUtils.CollectionPager CollectionPager1; 

    private void Page_Load(object sender, System.EventArgs e) 
    { 
        //Create DataSet DataSet SampleDataSet = SampleData();
        //Set DataSource of Pager to Sample Data 
   
        CollectionPager1.DataSource = SampleDataSet.Tables[0].DefaultView;
        //Let the Pager know what Control it needs to DataBind during the PreRender.
        
        CollectionPager1.BindToControl = Repeater1; //UPDATED! 
        //The Control now takes the object you are binding to,
        // instead of the name of it (as a string) 

        //Set the DataSource of the Repeater to the PagedData coming from the Pager. 
        Repeater1.DataSource = CollectionPager1.DataSourcePaged; 

        //Done!

    } 
    
    protected override void Render(HtmlTextWriter writer)
    {
        //Example of how to have the results show up in a different spot.
        litDifferentResultsFormat.Text = 
          CollectionPager1.BuildResults("Currently viewing {0} through {1}");

        //Example of how to have a second pager that is tied in...
        litTopPager.Text = CollectionPager1.RenderedHtml;

        base.Render (writer);
    }
    
    ... other stuff ...
}

Control Properties

This control has a lot of properties that allow for customizing its appearance. Every section allows you to specify a CssClass and Style. You can also control the character which is used between page numbers. Here's a screenshot of the properties available:

Image 3

Installation

Installing the control

You can install the control in the standard way:

  • Create a "bin" folder inside the application root of your website (if it's not already there).
  • Copy the assembly file CollectionPager.dll into the bin folder.

Installing the demo

Unzip the ZIP file with the demo. Right-click on the "CollectionPagerExample" subfolder and select Properties. On the Properties window, click "web-sharing" and check "Share this folder".

You should then be able to browse to:

Opening the Solution in Visual Studio

There should be a "CollectionPagerSolution.sln" file in the root of the unzipped folder. When you open this file, you may be prompted for the CollectionPagerExample location. Use the Browse button to locate the CollectionPagerSample folder.

Good Luck!!!

Please let me know if you have any questions or thoughts. As this is my first CodeProject article, I hope that I was clear enough on what it does and how to use it. Thanks!!!

Updates:

2005/10/14

  • I have added "Slider" functionality now. Hey, I couldn't think of a better name! :-) Anyway... when you have a list of page numbers in your pager ... it can move. So, if you're on page 20 and your slider size is 10... the pager will display links to 15-25. If you go down a page to 19 it will show links to 14-24. Use the SliderSize and UseSlider properties to make it happen. :-)
  • The repeater now takes an object as its BindToControl property. This should reduce confusion when using user controls and such. On a side note, there is now an example of using the control with a user control.
  • Other additional tweaks. Enjoy!

2005/05/26 (Major update)

  • I have added a lot of functionality and flexibility to the pager.
  • You can now have it display a "First" and "Last" button/link to allow users to jump to those pages.
  • The previous/next buttons can now be displayed on the left, right, split, or none.
  • You can also access the ResultsInfo in your code behind. This allows you to place this info elsewhere on the page. See example.
  • I have added viewstate functions to correctly load and save viewstate between postbacks.
  • By using the "RenderedHTML" property, you can easily create a second pager above your grid. See example.

2005/04/07

  • Added ShowBackNextLinks property to allow you to display or hide the Back & Next buttons/links.
  • Added ShowPageNumbers property to allow you to display or hide the page numbers.

2005/03/22

  • Added PagingMode property to allow you to choose QueryString or PostBack methods of changing pages.
  • Fixed a bug reported by "whylove" - Thanks!!

2005/03/10

  • Added QueryStringKey property. Allows you to have multiple controls on a single page. Use a unique key for each control.
  • Also fixed a bug reported by a user. Thanks Marc!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralRe: Resetting the pager index (.page) Pin
vijaip26-Jun-07 4:55
vijaip26-Jun-07 4:55 
QuestionHelp!!! Problem with post back.... Pin
fayalif17-Apr-07 22:47
fayalif17-Apr-07 22:47 
AnswerRe: Help!!! Problem with post back.... Pin
r.cicca10-May-07 1:07
r.cicca10-May-07 1:07 
AnswerRe: Help!!! Problem with post back.... [modified] Pin
r.cicca10-May-07 2:31
r.cicca10-May-07 2:31 
GeneralRe: Help!!! Problem with post back.... [modified] Pin
solucky_star30-Dec-11 0:34
solucky_star30-Dec-11 0:34 
GeneralThank You Pin
saber_solomon11-Apr-07 11:03
saber_solomon11-Apr-07 11:03 
GeneralRe: Thank You Pin
kevnord13-Apr-07 18:23
kevnord13-Apr-07 18:23 
QuestionBug in PagerControl Pin
vlater25-Mar-07 22:58
vlater25-Mar-07 22:58 
Hi.
I was searching the Internet for a code that would help me to add paging for a repeater. I found PagerControl is excelent control and saves a lot of codind. But there is a problem: I have, for example 564 total results, the PagerControl.MaxPages is set to 100 and PageSize to 10, when I select page 10 the button Next becomes disabled but there are more pages in the slider. Do you know how to fix this problem? Thanks in advance.
General4 stars Pin
gvirden7-Mar-07 6:52
gvirden7-Mar-07 6:52 
Generalrandom page Pin
Pablogrind27-Feb-07 18:48
Pablogrind27-Feb-07 18:48 
Questionrewrited URL Pin
Rizshaikh6-Feb-07 0:00
Rizshaikh6-Feb-07 0:00 
AnswerRe: rewrited URL Pin
stixoffire19-Feb-07 22:54
stixoffire19-Feb-07 22:54 
QuestionRe: rewrited URL Pin
Rizshaikh21-Feb-07 17:51
Rizshaikh21-Feb-07 17:51 
AnswerRe: rewrited URL [modified] Pin
stixoffire21-Feb-07 19:27
stixoffire21-Feb-07 19:27 
GeneralRe: rewrited URL [modified] Pin
Maik Tomé24-Apr-14 5:56
Maik Tomé24-Apr-14 5:56 
GeneralProblem With PostBack [modified] Pin
Dominic Perreault3-Feb-07 12:27
Dominic Perreault3-Feb-07 12:27 
GeneralRe: Problem With PostBack Pin
Pedro Maia Costa10-Feb-07 8:48
Pedro Maia Costa10-Feb-07 8:48 
GeneralGreat Control Pin
Pedro Maia Costa22-Jan-07 7:30
Pedro Maia Costa22-Jan-07 7:30 
GeneralRe: Great Control Pin
Pedro Maia Costa23-Jan-07 11:46
Pedro Maia Costa23-Jan-07 11:46 
Questionurl rewritten with & and not with ? Pin
Pablogrind19-Jan-07 5:36
Pablogrind19-Jan-07 5:36 
AnswerRe: url rewritten with & and not with ? Pin
stixoffire19-Feb-07 22:57
stixoffire19-Feb-07 22:57 
AnswerRe: url rewritten with & and not with ? Pin
stixoffire21-Feb-07 19:30
stixoffire21-Feb-07 19:30 
Questionuse sqldatasource Pin
arasteh15-Dec-06 21:14
arasteh15-Dec-06 21:14 
AnswerRe: use sqldatasource Pin
subai15-Dec-06 23:06
subai15-Dec-06 23:06 
AnswerRe: use sqldatasource Pin
Pablogrind18-Jan-07 10:04
Pablogrind18-Jan-07 10:04 

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.