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

Pagination with DataList

, 12 Sep 2012
Rate this:
Please Sign up or sign in to vote.
The most versatile control of ASP.NET, DataList, lacks one thing Pagination, built in.

Introduction

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

Code for the above design is shown below:

<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 let's look at the 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 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.

License

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

About the Author

John Bhatt
Software Developer (Senior) 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.
Follow on   Twitter   Google+

Comments and Discussions

 
QuestionSource Code Pinmembershuto12-Dec-13 21:51 
AnswerRe: Source Code PinmemberJohn Bhatt29-Dec-13 20:49 

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
Web04 | 2.8.140721.1 | Last Updated 13 Sep 2012
Article Copyright 2012 by John Bhatt
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid