Click here to Skip to main content
Click here to Skip to main content

Custom Paging for DataList

, 13 Sep 2006
Rate this:
Please Sign up or sign in to vote.
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 !!!.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

Share

About the Author

Sreejith Thathanattu
Software Developer
India India
No Biography provided

Comments and Discussions

 
GeneralMy vote of 1 Pinmembercomputeria27-Oct-10 1:28 
GeneralMy vote of 1 Pinmembervasuhajare12-Aug-10 0:40 
GeneralMy vote of 1 PinmemberTejaswini Prashant J20-Jun-10 21:16 
GeneralThanks!!! Pinmemberyeya8a27-Nov-09 11:23 
GeneralMy vote of 1 Pinmemberbhairavtailor21-Nov-09 4:18 
GeneralThis is also helpfulCustom Paging for DataList Pinmemberrajendra malav2-Sep-09 1:41 
GeneralI can't see the source code Pinmemberdothechuan19-May-08 10:35 
GeneralRetun wrong table PinmemberHasithaKavirathna12-Feb-07 18:44 
GeneralFormat your article properly Pinmembercykophysh397-Feb-07 4:52 
QuestionWhere does the txtPageIndex come into play? PinmembertheRexMundi18-Oct-06 6:04 
GeneralYour Codes Have two Mistakes PinmemberMahdi Yousefi26-Sep-06 1:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140814.1 | Last Updated 13 Sep 2006
Article Copyright 2006 by Sreejith Thathanattu
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid