Adding Paging Support to the Repeater or DataList with the
By Harrison Enholm
When building ASP.NET Web applications, one of the most common tasks is displaying data. ASP.NET offers a bounty of data Web controls that make displaying data a breeze, but the most powerful data Web control - the DataGrid - imposes some limitations on the flexibility of laying out the data on the Web page. Recently I found myself needing a more flexible layout than the DataGrid's rigid column/row orientation, so I decided to go with the Repeater control so I could easily customize the HTML markup emitted.
The Repeater control is great for situations like this, where you need a finer degree of control over the emitted HTML in order to layout the content in a unique or precise manner. One drawback to the Repeater is that it does not have built-in paging capability, a feature the DataGrid offers. Since I would need to display potentially hundreds of records in the catalog, it was essential that I provided paging support for the Repeater.
Fortunately there is a class in the .NET Framework that was designed to provide paged access to a data source. This class,
PagedDataSource class, can be used by either the Repeater or DataGrid to mimic the paging capabilities of
the DataGrid. Using the
PagedDataSource class you'll have to write a bit more code than you would when using
the DataGrid, but the amount and complexity of the code you do have to write is fairly low. In this article we'll examine
this class, and see a specific example of how to implement paging with a Repeater control.
Paging with the
PagedDataSourceclass, found in the
System.Web.UI.WebControlsnamespace, encapsulates the properties needed to enable paging for a control. To implement paging in a control with the
PagedDataSourceclass, you'll need to perform the following steps:
- Get the data that you want to page through. This can be an array, a DataSet, a DataReader, or any other object
that can be assigned to a data Web control's
- Create the
PagedDataSourceinstance, and assign the data to page through to the
- Set the
PagedDataSourceclass's paging properties, such as setting
AllowPagingto True, and setting
PageSize(to indicate how many records per page to show).
- Assign the
PagedDataSourceinstance to the data Web control's
DataSourceproperty and call the data Web control's
Example: Creating a Pageable Repeater
To examine how to use the
PagedDataSourceclass to provide pagination support in a Repeater, let's create a pageable Repeater. First we need to build the HTML content that includes the Repeater control; note that the HTML contains not only a Repeater, but also the paging navigation buttons and a Label indicating the page number. (Notice that the Repeater's
ItemTemplateis very simple in this example, and the same output could be possible with a DataGrid; but the concept holds - you could alter the Repeater's markup to allow for a much richer output that would not be possible with the DataGrid.)
The HTML for a pageable Repeater can be as simple or as involved as you want. The code, though, is pretty straightforward.
The first step is to write the code that will do all of the work of displaying the correct page of data in the Repeater.
This is accomplished by first reading in the data to be paged through.
For this example, I just created an XML file (
Items.xml) containing some sample data; this XML file is available
in the code download at the end of this article.
Now that we have the data to page through, we need to create a
PagedDataSource instance and specify its
DataSource property and other germane properties.
PagedDataSource also has a
CurrentPageIndex, which indicates what page of data to display.
The following code shows assigning this property. Note that
CurrentPageIndex is assigned the value of a page-level
CurrentPage. We'll discuss this page-level property shortly.
Finally, we need to enable/disable the navigation buttons depending if we're on the first/last page, as well as update the
Label Web control to indicate what page is currently being viewed. We can easily determine if we're on the first/last page
Finally, we display the correct page of data by binding the
PagedDataSource object to the Repeater.
CurrentPage Page-Level Property
Back in our earlier code example, we assigned the
CurrentPageIndexproperty to a page-level property called
CurrentPage. In order to remember the page of data to display across postbacks, it is important that the page index be maintained in the view state. This page-level property essentially wraps the complexity of reading from / writing to the view state, providing a convenient way to get and set the current page index. Here is the
Moving Between Pages of Data
To move from one page of data to another, the user visiting the Web page can click the next or previous buttons. These buttons, when clicked, cause a postback, and run server-side code that updates the
CurrentPageproperty and rebinds the data to the Repeater.
ItemsGet() is a page-level method (whose code we examined earlier) that contains the code to create the
PagedDataSource object and bind it to the Repeater.
As you can see, adding the paging functionality to the Repeater control is fairly simple thanks to the
PagedDataSource. You should now be able to create a paging Repeater control that will fit your needs; the lessons learned here can also be applied to adding pagination support to a DataList. Having the ability to page with a Repeater or DataList control will greatly enhance the usefulness of these data Web controls and, hopefully, you will find yourself using these versatile controls more often.