Paging using PagedDataSource class

Introduction

When we want to display data in Datalist or repeater we often have one problem PAGING. Datalist and Repeater both are powerful controls to customize "How the data is displayed in page".

DataList and Repeater both doesn't have auto paging support like the datagrid. Usually we diffent kind of custom paging to overcome this issue.

But there is a class in the .NET Framework that we can use to provide datagrid like paging support to datalist and repeater.

Here i will explain how to use the "PagedDataSource class" (System.Web.UI.WebControls).

In this example i will use a datalist to create an image gallery with paging support.

So lets create the datalist,

<asp:DataList runat="server" 
id="dlGallery" RepeatColumns="4" 
RepeatDirection="Horizontal">
<ItemTemplate>
<table border="0" 
cellpadding="0" 
cellspacing="0">
  <tr>
       <td><img  src="<%#DataBinder.Eval(Container.DataItem,"Image_URL")%>"  
width="90" 
height="90">
   </td>
  </tr>
         
</table>
</ItemTemplate>
</asp:DataList>

For the paging create two linkbuttons,

<table border="0" width="410">
<tr>
<td 
align="left"><asp:LinkButton 
ID="lbtnPrev" Runat="server">Prev</asp:LinkButton> 
</td>

<td align="right"><asp:LinkButton ID="lbtnNext" 
Runat="server">Next</asp:LinkButton> 
</td>
</tr>
</table>

         

Now the html part is over now we have to bind the data to the datalist.
For that lets create a public function "BindList()".

public void BindList()

{
//Creating an object for the 'PagedDataSource' for holding the data.  
PagedDataSource objPage = new PagedDataSource();

try
{
 
 DataSet ds = ....\\DataSource.
    
 objPage.AllowPaging = true;
     
 //Assigning the datasource to the 'objPage' object.
 objPage.DataSource = ds.Tables["Gallery"].DefaultView;
 //Setting the Pagesize
 objPage.PageSize = 8;
     
 //"CurrentPage" is public static variable to hold the current page index value declared in the global section.
 objPage.CurrentPageIndex = CurrentPage;
   
 //Assigning Datasource to the DataList.
 dlGallery.DataSource = objPage;
 dlGallery.DataKeyField = "Image_ID";
 dlGallery.DataBind();
}
    
catch(Exception ex)
{
 throw ex;
}
}

Now the datalist will display the first 8 records ( because i set "objPage.PageSize = 8").

For navigation we have to add littile bit code to the event handlers.  

private void lbtnPrev_Click(object sender, System.EventArgs e)

{
 CurrentPage -=1;
 BindList();
}

private void lbtnNext_Click(object sender, System.EventArgs e)

{
 CurrentPage +=1;
 BindList();
}

See we only need to +/- the value of the "CurrentPage " to provide navigation.

If u want enable/disable the navigation links according to the first/last page then add this few lines after the " dlGallery.DataBind();" line.

//Checking for enabling/disabling next/prev buttons.
//Next/prev buton will be disabled when is the last/first page of the pageobject.
   
lbtnNext.Enabled = !objPage.IsLastPage;
lbtnPrev.Enabled = !objPage.IsFirstPage;
   

Thats all. So here is the complete BindList function.

public void BindList()

{
//Creating an object for the 'PagedDataSource' for holding the data. 
 
PagedDataSource objPage = new PagedDataSource();
   
try
{
 
 DataSet ds = ....\\DataSource.
    
 objPage.AllowPaging = true;
     
 //Assigning the datasource to the 'objPage' object.
 objPage.DataSource = ds.Tables["Gallery"].DefaultView;
 //Setting the Pagesize
 objPage.PageSize = 8;
     
 //"CurrentPage" is public static variable to hold the current page index value declared in the global section. 
 objPage.CurrentPageIndex = CurrentPage;
 //Checking for enabling/disabling next/prev buttons.
 //Next/prev buton will be disabled when is the last/first page of the pageobject.
   
 lbtnNext.Enabled = !objPage.IsLastPage;
 lbtnPrev.Enabled = !objPage.IsFirstPage;
   
 //Assigning Datasource to the DataList.
 dlGallery.DataSource = objPage;
 dlGallery.DataKeyField = "Image_ID";
 dlGallery.DataBind();
}
    
catch(Exception ex)
{
 throw ex;
}
}