Pagination with DataList

• Download source - 1.3 KB

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.