Pagination with DataList ASP.NET

As we know, DataList is the most versatile Data Bound Control available in ASP.NET. Where you can display data as per your need in your required style, direction etc.

But there is some problem also. There is no option to Paginate the Data Loaded in DataList directly. In case we have too many records, we can not display all them in One Page without paginating.

To escape from this situation, Developers move to GridView, which has easy support for Paginating data.

Today, we will learn How to Paginate DataList data in Simple steps.

First create a DataList as per your requirement.

Now place Next and Previous Buttons for Navigation.

Sample Code for design is below:

CODE in ASPX Page

<div>
<asp:DataList ID="DataList1" runat="server" Height="194px" Width="174px"
oneditcommand="DataList1_EditCommand"
oncancelcommand="DataList1_CancelCommand"
onupdatecommand="DataList1_UpdateCommand" DataKeyField="eno">
<HeaderTemplate>
<table width="450" border="2">
<tr>
<th>Employee Name </th>
<th>Designation </th>
<th>Salary </th>
<th>
Edit
</th>
</tr>
</HeaderTemplate>
<EditItemTemplate>
<tr>
<td>
<asp:TextBox ID="txtEname" Text='<%#Eval("ename")%>' runat="server" />
</td>
<td>
<asp:TextBox ID="txtJOb" Text='<%#Eval("job")%>' runat="server" />
</td>
<td>
<asp:TextBox ID="txtSal" Text='<%#Eval("sal")%>' runat="server" />
</td>
<td>
<asp:LinkButton ID="lnk2" runat="server" Text="Update" CommandName ="Update" />
</td>
<td>
<asp:LinkButton ID="LinkButton1" runat="server" Text="Cancel"
CommandName ="Cancel" />
</td>
</tr>
</EditItemTemplate>
<ItemTemplate>
<tr>
<td><%#Eval("ename")%></td>
<td><%#Eval("job")%></td>
<td><%#Eval("sal")%></td>
<td>
<asp:LinkButton ID="lnk1" CommandName="Edit" Text="Edit !" runat="server" />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:DataList>
<br />
</div>
<table class="style1">
<tr>
<td class="style2">
<asp:LinkButton ID="LinkButton2" runat="server" onclick="LinkButton2_Click">Next</asp:LinkButton>
</td>
<td>
<asp:LinkButton ID="LinkButton3" runat="server" onclick="LinkButton3_Click">Previous</asp:LinkButton>
</td>
</tr>
</table>

Now Lets to to Backend. ASPX.CS Page (Code Behind):

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
CurrentPageIndex = 0;
showData();
}
}
int pg = 0;
void showData()
{
PagedDataSource pgd = new PagedDataSource();
SqlDataAdapter da = new SqlDataAdapter("select * from emp", "Data Source=.\\SQLDB;Database=Test1;Integrated Security=True");
DataSet ds = new DataSet();
da.Fill(ds);
pgd.DataSource = ds.Tables[0].DefaultView;
pgd.CurrentPageIndex = CurrentPageIndex ;
pgd.AllowPaging = true;
pgd.PageSize = 5;
LinkButton2.Enabled = !(pgd.IsLastPage);
LinkButton3.Enabled = !(pgd.IsFirstPage);
DataList1.DataSource = pgd;
DataList1.DataBind();
}
protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
{
DataList1.EditItemIndex = e.Item.ItemIndex;
showData();
}
protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e)
{
DataList1.EditItemIndex = -1;
showData();
}
protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)
{
}
public int CurrentPageIndex
{
get
{
if (ViewState["pg"] == null)
return 0;
else
return Convert.ToInt16(ViewState["pg"]);
}
set
{
ViewState["pg"] = value;
}
}
protected void LinkButton2_Click(object sender, EventArgs e) {
CurrentPageIndex++;
showData();
}
protected void LinkButton3_Click(object sender, EventArgs e)
{
CurrentPageIndex--;
showData();
}

Now Let me Describe things happened in above code:

Move to showData() function.

We created a new object of PagedDataSource. Paged data source as name stands clear, paginated data.

Now we wrote Query, Passed in Adapter, Filled DataSet which should be all clear, because it was Basic Task in ADO.NET. Now we gave it CurrentPageIndex. means where is page now.

For this, just look below to a class CurrentPageIndex which is returning value of CurentPageIndex =0 if page is beling Loaded. To check whether page is loaded or postback, we take help of ViewState. If ViewState["pg"] == null, On Page load this will be null because it is just being initiated. On Postback it will pass the Int value stored in it to CurrentPageIndex.

We set Pagination in PagedDataSource true and Define Page size of 5 records per page.

Now Passed PagedDataSource object as Datasource of Datalist.

Now Linkbutton click events, We increased and Decreased value of CurrentPageIndex.

Hope this must be helpful to you. In case of Any problem, correction in code and help, feel free to comment below.