Login or Sign Up to become a member!

EXPERTS, INFORMATION, IDEAS & KNOWLEDGE

Social bookmarker Add this

ASP.NET: Add paging to a repeater

From Wiki

Jump to: navigation, search

Summary: An example of how we can add paging to a repeater control by using a PagedDataSource.

Need help with ASP.NET? Come and ask a question in our ASP.NET Forum

Data controls such as the GridView have built in support for paging, however this isn't the same for the Repeater control. To add this functionality, I've decided to use the PagedDataSource class.

Let's start by creating a simple page which just contains a Repeater:

aspLine number On/Off | Show/Hide | Select all
  1. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="RepeaterPaging.aspx.vb" Inherits="RepeaterPaging" %>  
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" >  
  6. <head runat="server">  
  7.     <title>Untitled Page</title>  
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.     <div>  
  12.         <asp:Repeater ID="Repeater1" runat="server">  
  13.             <ItemTemplate>  
  14.                 <h2><%#DataBinder.Eval(Container.DataItem, "Column1")%></h2>  
  15.                 <p><%#DataBinder.Eval(Container.DataItem, "Column2")%></p>  
  16.             </ItemTemplate>  
  17.         </asp:Repeater>  
  18.     </div>  
  19.     </form>  
  20. </body>  
  21. </html>

Then, we'll populate this page with some sample data:

vbnetLine number On/Off | Show/Hide | Select all
  1. Imports System.Data  
  2. Partial Class RepeaterPaging
  3.     Inherits System.Web.UI.Page
  4.  
  5.     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  6.         ' Check for a postback    
  7.         If Not Page.IsPostBack Then
  8.             ' Bind the Repeater with some sample data    
  9.             Repeater1.DataSource = GetData()
  10.             Repeater1.DataBind()
  11.         End If
  12.     End Sub
  13.  
  14.     Private Function GetData() As DataTable
  15.         ' Declarations    
  16.         Dim dt As New DataTable
  17.         Dim dr As DataRow
  18.  
  19.         ' Add some columns    
  20.         dt.Columns.Add("Column1")
  21.         dt.Columns.Add("Column2")
  22.  
  23.         ' Add some test data    
  24.         For i As Integer = 0 To 10
  25.             dr = dt.NewRow
  26.             dr("Column1") = i
  27.             dr("Column2") = "Some Text " & (i * 5)
  28.             dt.Rows.Add(dr)
  29.         Next
  30.  
  31.         ' Return the DataTable    
  32.         Return dt
  33.     End Function
  34. End Class

As you'll see from the output, we have some sample data written out to the page ranging from items 0 to 10. Now, to add the paging capabilities we can use the PagedDataSource. To do this, we'll amend the GetData() function to return a PagedDataSource and we'll add a DataView from the current DataTable to it. e.g.

vbnetLine number On/Off | Show/Hide | Select all
  1. Private Function GetData() As PagedDataSource
  2.     ' Declarations    
  3.     Dim dt As New DataTable
  4.     Dim dr As DataRow
  5.     Dim pg As New PagedDataSource
  6.  
  7.     ' Add some columns    
  8.     dt.Columns.Add("Column1")
  9.     dt.Columns.Add("Column2")
  10.  
  11.     ' Add some test data    
  12.     For i As Integer = 0 To 10
  13.         dr = dt.NewRow
  14.         dr("Column1") = i
  15.         dr("Column2") = "Some Text " & (i * 5)
  16.         dt.Rows.Add(dr)
  17.     Next
  18.  
  19.     ' Add a DataView from the DataTable to the PagedDataSource  
  20.     pg.DataSource = dt.DefaultView
  21.  
  22.     ' Return the DataTable    
  23.     Return pg
  24.  
  25. End Function

If we ran this code now, we wouldn't actually see a difference in the results since we haven't actually set a page size yet. However, before we do this, we'll add some navigation links and a label to our page so we can see what page we are on and also be able to navigate to each page. Just under the Repeater control, add these controls:

aspLine number On/Off | Show/Hide | Select all
  1. <div>  
  2.     <a id="lnkPrev" runat="server">Previous</a>  
  3.     <asp:Label ID="lblCurrentPage" runat="server"></asp:Label>  
  4.     <a id="lnkNext" runat="server">Next</a>  
  5. </div>

Now, we need to actually apply the functionality that will allow the Repeater to be paged. To do this, we'll use querystring values to determine which page we need to show and also set a default just in case this page doesn't exist. Then, we can set the relevant page by setting the CurrentPageIndex property of our PagedDataSource and then rebind the grid. I've added comments to each section of the code so you should be able to see what steps we are taking along the way so let's go ahead and replace our current code with the new code that applies this functionality:

vbnetLine number On/Off | Show/Hide | Select all
  1. Imports System.Data  
  2. Partial Class RepeaterPaging
  3.     Inherits System.Web.UI.Page
  4.  
  5.     Private currentPage As Integer = 1 ' Default page  
  6.     Private pgdArticles As New PagedDataSource
  7.  
  8.     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  9.  
  10.         ' Make sure the user hasn't tampered with the querystring value  
  11.         If Integer.TryParse(Request.QueryString("Page"), New Integer) = True Then
  12.             currentPage = Request.QueryString("Page")
  13.         End If
  14.  
  15.         ' Get the requested list of articles and set the paging attributes  
  16.         pgdArticles = GetData()
  17.         pgdArticles.AllowPaging = True
  18.         pgdArticles.PageSize = 2
  19.  
  20.         ' Show the Current Page number  
  21.         lblCurrentPage.Text = "Page " & currentPage & " of " & pgdArticles.PageCount
  22.  
  23.         ' Add the next/previous link targets if the relevant pages exist  
  24.         If currentPage = 1 Then
  25.             lnkPrev.Attributes.Add("style", "visibility:hidden")
  26.         Else
  27.             lnkPrev.Attributes.Add("style", "visibility:visible")
  28.             lnkPrev.HRef = "RepeaterPaging.aspx?Page=" & (currentPage - 1)
  29.         End If
  30.         If currentPage = pgdArticles.PageCount Then
  31.             lnkNext.Attributes.Add("style", "visibility:hidden")
  32.         Else
  33.             lnkNext.Attributes.Add("style", "visibility:visible")
  34.             lnkNext.HRef = "RepeaterPaging.aspx?Page=" & (currentPage + 1)
  35.         End If
  36.  
  37.         ' Bind the repeater  
  38.         BindData()
  39.     End Sub
  40.  
  41.     Private Sub BindData()
  42.         ' Make sure the user hasn't requested a page that doesn't exist  
  43.         If currentPage < 1 Then
  44.             currentPage = 1
  45.         End If
  46.         If currentPage > pgdArticles.PageCount Then
  47.             currentPage = pgdArticles.PageCount
  48.         End If
  49.  
  50.         ' Set the current page to be shown  
  51.         pgdArticles.CurrentPageIndex = (currentPage - 1)
  52.  
  53.         ' Bind the repeater  
  54.         Repeater1.DataSource = pgdArticles
  55.         Repeater1.DataBind()
  56.  
  57.     End Sub
  58.  
  59.     Private Function GetData() As PagedDataSource
  60.         ' Declarations    
  61.         Dim dt As New DataTable
  62.         Dim dr As DataRow
  63.         Dim pg As New PagedDataSource
  64.  
  65.         ' Add some columns    
  66.         dt.Columns.Add("Column1")
  67.         dt.Columns.Add("Column2")
  68.  
  69.         ' Add some test data    
  70.         For i As Integer = 0 To 10
  71.             dr = dt.NewRow
  72.             dr("Column1") = i
  73.             dr("Column2") = "Some Text " & (i * 5)
  74.             dt.Rows.Add(dr)
  75.         Next
  76.  
  77.         ' Add a DataView from the DataTable to the PagedDataSource  
  78.         pg.DataSource = dt.DefaultView
  79.  
  80.         ' Return the DataTable    
  81.         Return pg
  82.  
  83.     End Function
  84. End Class

When we run this code, you'll now see that we now have 6 pages (since we set the page size to 2 in this example) and that you can navigate to each page by using the Previous/Next links.


This Hack is part of the ASP.NET Hacks collection

443 Rating: 3.8/5 (12 votes cast)

Retrieved from "http://wiki.lessthandot.com/index.php/ASP.NET:_Add_paging_to_a_repeater"

Tools


RssFeeds
Donate

Blogs


Become a blogger

Statistics


Top 10 rated users for the last 7 days

User Ratings
Emtucifor23
AlexCuse12
chrissie110
gmmastros7
kaht6
traingamer6
Niikola4
LNBruno4
Remou3
SQLDenis3

Links



With Thanks To...


Powered by MediaWiki GNU Free Documentation License 1.2
Valid XHTML | Valid CSS