DataListPaging

1. 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.

2. Scope :

To provide custom paging for datalist.

3. DataList :

In the designer page ,write the following code,

RepeatColumns="4" RepeatDirection="Horizontal"> 

" width="90"  Height="90">

4. Code Behind :

Create a public function that will return only the necessary 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; 
int page = 0; 
DataSet ds = new DataSet(); 
//ds = //retrieve the data from the database. or datatable or dataview format 
//here datatable has been taken 

DataTable dt = new DataTable(); 
dt = dView.ToTable(); ; 

//for paging 
int totalPages; 
 

 if (dt.Rows.Count % pageSize != 0) 
{ 
totalPages = dt.Rows.Count / pageSize; 
totalPages = totalPages + 1; 
lblTotalPage.Text = "of Page "+ totalPages ; //populates total no of pages in label 

} 
else 
{ 
totalPages = dt.Rows.Count / pageSize; 
lblTotalPage.Text = "of Page " + totalPages; 

} 

if ( txtPageIndex.Text.Trim() == Convert.ToString(totalPages)) //displaying page index value accordingly page index changed 
{ 
lbtnNext.ImageUrl = "~/DownloadedImages/arrowRdisabled.gif"; //showing image 

lbtnNext.Enabled = false; 
} 
else 
{ 
lbtnNext.ImageUrl = "~/DownloadedImages/arrowR.gif"; //showing image 

lbtnNext.Enabled = true; 

} 

if(((pageIndex-1)<=(dt.Rows.Count/pageSize)) && (pageIndex-1) >= 0) 
{ 

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 dt.Rows) 
{ 

if(count >= page && count < (pageSize * pageIndex)) 
{ 
//Adding rows to the datatable 'dtImg'. 
dtImg.Rows.Add(nRow.ItemArray); 
} 
count++; 
lblCount.Text =" Records Found : " + count; 

} 

outPageIndex = pageIndex; 
// DataView dv = new DataView(dtImg); 
dlImageGallery.DataSource = dtImg; 
// return ds.Tables["dtImg"]; 
return ds; 
} 
} 
catch(Exception ex) 
{ 
throw ex; 
} 
} 


public void BindList() 
{ 
int outPageIndex ; 
DataSet ds = new DataSet(); 
ds = GetAllImagesCustom(Convert.ToInt32(txtPageIndex.Text), 
out outPageIndex); 
dlImageGallery.DataSource = ds; 
dlImageGallery.DataBind(); 
//Assigning the new pageIndex value returned from the 
//function to the Hidden textbox. 
txtPageIndex.Text = Convert.ToString(outPageIndex).Trim(); 
if (txtPageIndex.Text.Trim() == "1") 
{ 
lbtnPrev.Enabled = false; 
lbtnPrev.ImageUrl = "~/DownloadedImages/arrowLdisabled.gif"; //showing image 
} 
else 
{ 
lbtnPrev.Enabled = true; 
lbtnPrev.ImageUrl = "~/DownloadedImages/arrow_enabled.GIF"; //showing image 


} } 

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. 
//Previous page event 
private void lbtnPrev_Click(object sender, System.EventArgs e) 
{ 
//Actual pageIndex -1 
txtPageIndex.Text = Convert.ToString(Convert.ToInt32(txtPageIndex.Text) - 1); 
BindList(); 
} 

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