ARTICLE

Paging With DataList Control in ASP.NET

Posted by Alok Pandey in Articles | ASP.NET Controls in C# on January 17, 2012

Tags: ASP.NET Controls, ASP.NET Controls with Paging, ASP.NET tutorials, creating custom paging for datalist, paging in datalist

Here you will learn how to create custom paging for a DataList control in ASP.NET.

Tweet
1687
0

Reader Level: Beginner

Introduction

AllowPaging is an important property in web applications to enable paging. Suppose we want to show a limited number of records from a database using a DetailsView or GridView, then we simply enable its AllowPaging property to True and easily add paging facility. But when we want to add a paging feature to a DataList or Repeater control, then there is not an AllowPaging property. We used PagedDataSource to add a paging feature in DataList or Repeater controls. Here I am displaying records from a database in a DalaList control and adding a paging feature in a DataList.

In this example, the database name is "student" and the database table name is "student_detail". I am giving a screenshot of all records to it easier to understand.

i

Now take a web application -> take a DataList and four Button controls like in the following figure.

Write the following code.

Code on .aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="PagininDataList.WebForm1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 672px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
   <div>
    <table style="height: 79px; width: 429px">
        <asp:DataList ID="DataList1" runat="server">
        <HeaderTemplate>
        <h1> Details </h1>
        </HeaderTemplate>
      <ItemTemplate>
        <tr>
        <td><h4>Roll Number</h4> </td>
         <td><h4>NAME</h4></td>
          <td><h4>AGE</h4></td>
           <td><h4>CITY</h4></td>
           <td><h4>COURSE</h4></td>
        </tr>
        <tr>
        <td><h5><%#Eval("roll_no") %></h5></td>
         <td><h5><%#Eval("s_name") %></h5></td>
          <td><h5><%#Eval("age") %></h5></td>
           <td><h5><%#Eval("city") %></h5></td>
            <td><h5><%#Eval("course") %></h5></td>
        </tr>
        </ItemTemplate>
        </asp:DataList>
       </table>
   <table>
<tr>
    <td>
        <asp:Button ID="btnfirst" runat="server" Font-Bold="true" Text="<<" Height="31px"
                    Width="43px" onclick="btnfirst_Click" /></td>
        <td>
            <asp:Button ID="btnprevious" runat="server" Font-Bold="true" Text="<" Height="31px"
                    Width="43px" onclick="btnprevious_Click" /></td>
            <td>
                <asp:Button ID="btnnext" runat="server" Font-Bold="true" Text=">" Height="31px"
                    Width="43px" onclick="btnnext_Click" /></td>
                <td>
                    <asp:Button ID="btnlast" runat="server" Font-Bold="true" Text=">>" Height="31px"
                    Width="43px" onclick="btnlast_Click" /></td>
    </tr>
   </table>
    </div>
    </form>
</body>
</html>

Code on .aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
namespace PagininDataList
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        SqlDataAdapter dadapter;
        DataSet dset;
        PagedDataSource adsource;
        string connstring = "database=student;server=.;user=sa;password=wintellect";
        int pos;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.ViewState["vs"] = 0;
            }
            pos = (int)this.ViewState["vs"];
            databind();
        }
        public void databind()
        {
            dadapter = new SqlDataAdapter("select * from student_detail", connstring);
            dset = new DataSet();
            adsource = new PagedDataSource();
            dadapter.Fill(dset);
            adsource.DataSource = dset.Tables[0].DefaultView;
            adsource.PageSize = 3;
            adsource.AllowPaging=true;
            adsource.CurrentPageIndex = pos;
            btnfirst.Enabled = !adsource.IsFirstPage;
            btnprevious.Enabled = !adsource.IsFirstPage;
            btnlast.Enabled = !adsource.IsLastPage;
            btnnext.Enabled = !adsource.IsLastPage;
            DataList1.DataSource = adsource;
            DataList1.DataBind();
        }

        protected void btnfirst_Click(object sender, EventArgs e)
        {
            pos = 0;
            databind();
        }

        protected void btnprevious_Click(object sender, EventArgs e)
        {
            pos = (int)this.ViewState["vs"];
            pos -= 1;
            this.ViewState["vs"] = pos;
            databind();
        }

        protected void btnnext_Click(object sender, EventArgs e)
        {
            pos = (int)this.ViewState["vs"];
            pos += 1;
            this.ViewState["vs"] = pos;
            databind();
        }

        protected void btnlast_Click(object sender, EventArgs e)
        {
            pos = adsource.PageCount-1;
            databind();
        }
    }
}

Run the application.

Output

It will show 3 records at a time. You can go to the First, Previous, Next and Last record by clicking the appropriate button.