Paging Repeater Control using PagedDataSource

You are currently viewing Paging Repeater Control using PagedDataSource

Paging large database result sets is very important and common feature in modern websites. For ASP.NET developers, Microsoft has build paging functionality into the GridView control by default and developers just have to set some simple properties true and that’s all they need to have paging in their websites. Many developers prefer Repeater or DataList control over GridView due to its large overhead. In this tutorial, I will show you how you can do paging using light weight ASP.NET Repeater control and PagedDataSource class.

The PagedDataSource class

This class is available in System.Web.UI.WebControls namespace, so you don’t have to import any additional namespace to the ASP.NET page. This class provides you facility to add paging functionality to DataList, Repeater or any other control. It encapsulates all the functionality of GridView paging and if you have ever used GridView paging, you will find the following properties of this class very familiar to you.

  • AllowPaging – This Boolean property determines whether the paging should be enabled or disabled. By default it is set to false.
  • PageSize – This property defines how many records to display on a page. The default value is 10.
  • CurrentPageIndex – This property returns or set the current page number. By default it returns 0.
  • PageCount – This property returns the total number of pages
  • DataSource – The value of this property will be the source of the data you want to page. i.e. DataTable.
  • IsFirstPage – This property returns true or false depending on whether the current page is the first page.
  • IsLastPage – This property returns true or false depending on whether the current page is the last page.
READ ALSO:  Selecting Data in ASP.NET ListView Control

Now you have basic idea of important properties of PagedDataSource class I am showing you live working example how to use this class to implement paging with Repeater control. Following code is HTML source of the ASP.NET page showing you a simple Repeater control with Header, Footer and ItemTemplate. All three templates are creating a simple HTML table to make it look like GridView control.

<asp:Label ID="Label1" runat="server" Font-Bold="True" />
<br />
<br />
<asp:Repeater ID="Repeater1" runat="server">
   <HeaderTemplate>
      <table border="1" style="border-color: #336699;" cellspacing="0">               
         <tr style="background-color:#336699; color:White;">
            <td>Product ID</td>
            <td>Product Name</td>
            <td>Unit Price</td>
         </tr>
   </HeaderTemplate>
   <ItemTemplate>
         <tr>
            <td><%# Eval("ProductID") %></td>
            <td><%# Eval("ProductName") %></td>
            <td><%# Eval("UnitPrice") %></td>
         </tr>
   </ItemTemplate>
   <FooterTemplate>
      </table>
   </FooterTemplate>
</asp:Repeater> 

<br />
           
<asp:HyperLink ID="linkPrev" runat="server">Previous Page</asp:HyperLink>
<asp:HyperLink ID="linkNext" runat="server">Next Page</asp:HyperLink>

You must notice Label control and two HyperLink controls. These controls are not part of the Repeater control and are placed outside Repeater control. The Label control will show user current page and total number of pages and hyper link controls will provide Next and Previous page functionality.

Following is the C# code behind file for the above page. For brevity I am putting all the code in Page_Load event of the page.

protected void Page_Load(object sender, EventArgs e) 
{ 
  if (!Page.IsPostBack)
  { 
     string constr = "Server=.\\SQLEXPRESS; Database=NORTHWND; uid=test; pwd=test"; 
     string query = "SELECT * FROM Products"; 
     SqlDataAdapter da = new SqlDataAdapter(query, constr); 
     DataTable table = new DataTable(); 
     da.Fill(table); 

     PagedDataSource pds = new PagedDataSource(); 
     pds.DataSource = table.DefaultView; 
     pds.AllowPaging = true; 
     pds.PageSize = 5; 

     int currentPage; 

     if (Request.QueryString["page"] != null) 
     { 
         currentPage = Int32.Parse(Request.QueryString["page"]); 
     } 
     else 
     { 
         currentPage = 1; 
     } 
     
     pds.CurrentPageIndex = currentPage - 1; 
     Label1.Text = "Page " + currentPage + " of " + pds.PageCount; 

     if (!pds.IsFirstPage) 
     { 
         linkPrev.NavigateUrl = Request.CurrentExecutionFilePath + "?page=" + (currentPage - 1); 
     } 
     
     if (!pds.IsLastPage) 
     { 
         linkNext.NavigateUrl = Request.CurrentExecutionFilePath + "?page=" + (currentPage + 1); 
     } 

     Repeater1.DataSource = pds; 
     Repeater1.DataBind(); 
   } 
}

Explanation

I am using Microsoft’s very popular Northwind database for this example and first few lines in the above code are filling a DataTable object by using ADO.NET SqlDataAdapter object

string constr = "Server=.\\SQLEXPRESS; Database=NORTHWND; uid=test; pwd=test"; 
string query = "SELECT * FROM Products"; 
SqlDataAdapter da = new SqlDataAdapter(query, constr); 
DataTable table = new DataTable(); 
da.Fill(table);

The following code creates an instance of PagedDataSource class and sets some basic properties.

PagedDataSource pds = new PagedDataSource(); 
pds.DataSource = table.DefaultView; 
pds.AllowPaging = true; 
pds.PageSize = 5;

The following code is checks the current page number in query string and then sets the CurrentPageIndex property of PagedDataSource accordingly.

if (Request.QueryString["page"] != null) 
{ 
   currentPage = Int32.Parse(Request.QueryString["page"]); 
} 
else 
{ 
  currentPage = 1; 
}

pds.CurrentPageIndex = currentPage - 1;
Label1.Text = "Page " + currentPage + " of " + pds.PageCount;

Following code updates Next and Previous pages links dynamically. It also checks whether the current page is first or last page.

if (!pds.IsFirstPage) 
{ 
    linkPrev.NavigateUrl = Request.CurrentExecutionFilePath + "?page=" + (currentPage - 1); 
} 

if (!pds.IsLastPage)
{ 
    linkNext.NavigateUrl = Request.CurrentExecutionFilePath + "?page=" + (currentPage + 1); 
}

Last two lines in the code are binding PagedDataSource instance with Repeater control.

Repeater1.DataSource = pds; Repeater1.DataBind();

I hope some ASP.NET developers will find this tutorial very useful and I am sure for many of you PagedDataSource is totally new object. .NET Framework is full of many useful classes to make your life easier. It’s just a matter of knowing and working with them. I will recommend you to visit .NET Framework SDK documentation regularly to keep yourself up to date.

READ ALSO:  Export ASP.NET GridView to Excel

This Post Has 21 Comments

  1. kiquenet kiquenet

    And for MVC ?

  2. MANOJ

    VERY USEFUL

  3. web designing Agra

    Thanks for posting. Its really helpful for me. I saved this as bookmark. Thanks Again.

  4. HardDriveCer0

    thank you for this codes. my thesis is complete

  5. asd

    so good

  6. shoeb

    thank you so much

  7. Aditya

    Very Easy And Nice Tutorial Sir Thanks a Lot

  8. prathip

    dear sir,

    very useful example.

    Regards,
    P.Prathip

  9. vividknowledge

    Very well layed out. I like the fact the code is very light without a bunch of “extras” in it. If one has a general understanding of the concept, this code example leaves lots of “obvious” room for your own customization. VERY NICE indeed.

  10. swetha

    Excellent.

  11. kapil sharma

    Code explanation technique is awesome. Thanks a lot.

  12. Prakash Limbachia

    Very detailed explanation of PagedDataSource, thank you so much

  13. Ganesh

    Very easy to understand. Even beginner also can able to easily understand the code.

    Very thanks

  14. Aman

    i realy like this site and tutorial too logic used is simple, easy to understand. an has proved useful to me.

  15. dipti

    thanks a lot

  16. maral azizi

    dear Waqas Anwar
    thank you so much
    that was so great and helpful for me!

  17. Kavita

    This is very usefull.

  18. Sumit

    Hi!

    this good way to use this

  19. Akhtar

    Dear Sir,

    It is a very good tutorial.And very easy to understand because you explain every thing.Thank You Sir

  20. zenab

    Hello

    My pagedatasource always return 1st two records each time I call the function with current page index (where i ve placed the pagedatasource code)
    pagesize is 2 but records count from datasource is 6

  21. Jalil Ahmad Malik

    Respected Sir,

    I have no words to say thanks against this detailed tutorial. this is most helpful tutorial specially for me.

Leave a Reply