Custom Paging for DataList

Introduction

In this article i will explain a method for providing custom paging for datalist or repeater.

As you know the datalist is a very powerful control with one drawback that it does not have built-in paging capability, a feature the DataGrid offers. to provide paging to datalist or repeater we can either use "PagedDataSource" class, found in the System.Web.UI.WebControls namespace for auto paging like the datagrid or implement custom paging functionality.

So here is the scenario, i have an image gallery with 8 images per page. i need to provide paging so the user can navigate and view all images. The first step is to create the datalist and paging links.

//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> 
//Next/Prev Links. 
<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> 

//The Code Behind

Create a public function that will return only the neccessary rows (After paging). For that we need five static variables.

private int imgID;
private string imgTitle;
private string imgURL;
private static int pageSize = 8; 
//(This one will hold the no of records return 
//i mean "no. of records per page").
private static int pageIndex = 0; 
//(This one is for checking the current page). 
public DataSet GetAllImagesCustom(int pageIndex, out int outPageIndex)
{

try
{
int count = 0;
DataSet ds = new DataSet();
ds = //retrieve the data from the database.

//for paging
int page = 0;

//checking the whether the pageIndex value is not <First and >Last.
//And if it is then assigning the default 
//values for pageIndex and page variables. 
if(((pageIndex-1) <= (ds.Tables[0].Rows.Count/pageSize)) && 
(pageIndex-1) >= 0)
{
//If the pageIndex is >=first and =<last then assigning the start position
//eg. if pageIndex = 2 then value of 'page' = 8. 
//So in the loop it will add rows to the table
//from the 8 th row.

page = pageSize * (pageIndex-1);
}
else
{
//Assigning default values. 
page = 0;
pageIndex = 1;
}


//creating a data table for adding the required rows or u 
//can clone the existing table.

DataTable dtImg = new DataTable("Images");
DataColumn newCol = new DataColumn("Image_ID",Type.GetType("System.Int32"));
dtImg.Columns.Add(newCol);//For storing image id. 
newCol = new DataColumn("Image_Title",Type.GetType("System.String"));
dtImg.Columns.Add(newCol);//For storing image Title. 
newCol = new DataColumn("Image_URL",Type.GetType("System.String"));
dtImg.Columns.Add(newCol);//For storing image URL. 
//adding the required rows to the datatable dtImg. 
foreach(DataRow nRow in ds.Tables[0].Rows)
{
//if the page=8 and pageIndex =2 then
//rows between 8 to 16(if exists) will be added to the new table. 
if(count >= page && count < (pageSize * pageIndex))
{
//Adding rows to the datatable 'dtImg'. 
dtImg.Rows.Add(nRow.ItemArray);
}
count++;
} 
outPageIndex = pageIndex;
return ds;
}
}
catch(Exception ex)
{
throw ex;
}
} 
public void BindList()
{
.....
DataSet ds = new DataSet();
ds = GetAllImagesCustom(Convert.ToInt32(txtPageIndex.Text), 
out outPageIndex);
dlGallery.DataSource = ds;
dlGallery.DataBind(); 
//Assigning the new pageIndex value returned from the 
//function to the Hidden textbox.
txtPageIndex.Text = Convert.ToString(outPageIndex);
} 

Now we have a datalist with 8 images per page. But still we hav'nt done the navigation part. Thats simple as u can see from the above function there isn't much logic needed. we only need to plus or minus the pageindex value and call the BindList function.

private void lbtnPrev_Click(object sender, System.EventArgs e)
{
//Actual pageIndex -1 
txtPageIndex.Text = Convert.ToString(Convert.ToInt32(txtPageIndex.Text) - 1);
BindList();
} 
private void lbtnNext_Click(object sender, System.EventArgs e)
{
//Actual pageIndex +1 
txtPageIndex.Text = Convert.ToString(Convert.ToInt32(txtPageIndex.Text) + 1);
BindList();
} 

Thats all Finished !!!.