Click here to Skip to main content
15,445,242 members
Articles / Web Development / HTML
Posted 12 Sep 2012


5 bookmarked

Pagination with DataList

Rate me:
Please Sign up or sign in to vote.
4.33/5 (6 votes)
12 Sep 2012CPOL2 min read
The most versatile control of ASP.NET, DataList, lacks one thing Pagination, built in.


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 as well. There is no option to Paginate the Data Loaded in DataList directly. In case we have too many records, we cannot display all of 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. I made one like below which is quite simple.

Let's place Next and Previous Buttons for navigation.

Design & Code

Image 1

Code for the above design is shown below:

        <asp:DataList ID="DataList1" runat="server" 
        Height="194px" Width="174px" 
            onupdatecommand="DataList1_UpdateCommand" DataKeyField="eno">
              <table width="450" border="2">
                    <th>Employee Name </th>
                    <th>Designation </th>
                    <th>Salary </th>
                        <asp:TextBox ID="txtEname" 
                        Text='<%#Eval("ename")%>' runat="server" />
                        <asp:TextBox ID="txtJOb" 
                        Text='<%#Eval("job")%>' runat="server" />
                        <asp:TextBox ID="txtSal" 
                        Text='<%#Eval("sal")%>' runat="server" />
                        <asp:LinkButton ID="lnk2" runat="server" 
                        Text="Update" CommandName ="Update" />
                        <asp:LinkButton ID="LinkButton1" 
                        runat="server" Text="Cancel"
                         CommandName ="Cancel" />


                        <asp:LinkButton ID="lnk1" CommandName="Edit"  
                        Text="Edit !" runat="server" />
        <br />
    <table class="style1">
            <td class="style2">
                <asp:LinkButton ID="LinkButton2" runat="server" 
                <asp:LinkButton ID="LinkButton3" runat="server" 

Now let's look at the backend.

ASPX.CS Page (Code Behind)

protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
            CurrentPageIndex = 0;
    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();

        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;

    protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
        DataList1.EditItemIndex = e.Item.ItemIndex;
    protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e)
        DataList1.EditItemIndex = -1;
    protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)


    public int CurrentPageIndex
            if (ViewState["pg"] == null)
                return 0;
                return Convert.ToInt16(ViewState["pg"]); 
            ViewState["pg"] = value; 

protected void LinkButton2_Click(object sender, EventArgs e)    {
    protected void LinkButton3_Click(object sender, EventArgs e)

Now let me describe things that happened in the above code:

Move to showData() function.

We created a new object of PagedDataSource. Paged data source as the 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 which means where is page now. For this, just look below to a class CurrentPageIndex which is returning value of CurentPageIndex =0 if page is being loaded. To check whether page is loaded or postback, we take the 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 pass PagedDataSource object as Datasource of Datalist.Now Linkbutton click events, we increased and decreased the value of CurrentPageIndex.

Hope this will be helpful to you. In case of any problem, please make correction in the code and help, feel free to comment below.

This tip has also been published here.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Founder P.Yar.B Complex
Nepal Nepal
John Bhatt is an IT Professional having interest in Web technology. He is Web Designer, Developer, Software Developer, Blogger and Technology Geek. Currently he writes his Blogs at Blog of P.Yar.B and various other Sites. He is Main author and founder of Download Center.
Contact Him at : Facebook | Twitter | Website | PRB - Blog.

Comments and Discussions

-- There are no messages in this forum --