How to do pagination in the ListView using DataPager control?

ListView

ListView control is the new and improved control introduced from ASP.NET 3.5 version. It is a template based control that gives us better command over the layout. It can also be looked as an alternative to the DataList control.

Get hundreds of ASP.NET Tips and Tricks and ASP.NET Online training here.

In the previous article, we learnt about how to perform CRUD (Create Read Update & Delete) operation in ListView.
In this article, we shall learn how to do pagination in the ListView using DataPager control?

ASPX PAGE

<asp:ListView runat="server" ID="ListView1" ItemPlaceholderID="itemPlaceHolder1" OnPagePropertiesChanging="ChangePage">
<LayoutTemplate>
<table border="1">
<tr><th>AutoId</th><th>First Name</th><th>Last Name</th><th>Age</th><th>Active</th></tr>
<asp:PlaceHolder ID="itemPlaceHolder1" runat="server"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<%# Eval("AutoID") %>
</td>
<td>
<%# Eval("FirstName") %>
</td>
<td>
<%# Eval("LastName") %>
</td>
<td><%#Eval("Age") %></td>
<td>
<%# Eval("Active") %>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:DataPager ID="DataPager1" runat="server" PagedControlID="ListView1" PageSize="5">
<Fields>
<asp:NumericPagerField ButtonCount="5" />
</Fields>
</asp:DataPager>

CODE BEHIND

string _connStr = ConfigurationManager.ConnectionStrings["ConnStr"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
PopulateData();
}
}
 
private void PopulateData()
{
DataTable table = new DataTable();
using (SqlConnection conn = new SqlConnection(_connStr))
{
string sql = "Select * from PersonalDetail";
using (SqlCommand cmd = new SqlCommand(sql, conn))
{
using (SqlDataAdapter ad = new SqlDataAdapter(cmd))
{
ad.Fill(table);
}
}
}
ListView1.DataSource = table;
ListView1.DataBind();
}
 
/// <summary>
/// Changes the page.
/// </summary>
/// <param name="sender">The sender.</param>
/// <param name="e">The <see cref="System.Web.UI.WebControls.PagePropertiesChangingEventArgs"/> instance containing the event data.</param>
protected void ChangePage(object sender, PagePropertiesChangingEventArgs e)
{
DataPager1.SetPageProperties(e.StartRowIndex, e.MaximumRows, false);
this.PopulateData();
}
 

DataPager control:

To paginate the asp:ListView, asp:DataPager control is used. DataPager works with web controls which implements IPageableItemContainer and .NET framework provides only one such control i.e. ListView. Other controls like GridView can be customized to implement this interface so that datapager can be used with them. To know more about asp:DataPager control visit http://msdn.microsoft.com/en-us/library/cc295263(v=expression.30).aspx.

In the above code snippet, on the .aspx page we have a ListView and a DataPager control. ListView control is attached with DataPager control using PagedControlID property and when the page numbers of DataPager control is clicked the OnPagePropertiesChanging event of ListView fires. In this event, we have specified ChangePage server side method to fire where we have specified the start index, maximum rows per page (these properties are set into the DataPager control) in the ListView and whether to rebind the data after page properties are set or not.

Clicking on page number paginates the records of the ListView.

OUTPUT

Thanks for reading, hope you liked it.

Keep reading my forth coming articles. To read my series of articles on ASP.NET,click here.