Tuesday, August 11, 2015

Implement Google style pagination in Repeater control in asp.net

Introduction: In this article I am going to explain how to Implement Google Style Pagination in Repeater Control in Asp.net

Description:
In this example I am using the Next, Previous, First and last button in pagination. I have created table Student_Detail and table have data.

As we know repeater control by default does not have pagination option. Hence if we use the repeater control and want pagination in it so we have to write the custom code for it.
Example of Implementation:
Add a webform to project. Drag and drop the Repeater control and 4 link button from toolbox to webform.
    <table>
        <tr><td>
            <asp:Repeater ID="rptsudentdetail" runat="server">
                <HeaderTemplate>
                    <table>
                          <thead>          
                <th>Student Name</th>
              <th>Fee</th>
                <th>Class </th>
                <th>Roll No.</th>
         
               </thead>
                </HeaderTemplate>
                <ItemTemplate>
                 <tr><td><%#DataBinder.Eval(Container, "DataItem.SudentName")%></td>
                     <td><%#DataBinder.Eval(Container, "DataItem.Fee")%></td>
                     <td><%#DataBinder.Eval(Container, "DataItem.StudentClass")%></td>
                     <td><%#DataBinder.Eval(Container, "DataItem.StudentRollNo")%></td>
                 </tr>
                </ItemTemplate>
            </asp:Repeater>
        </td></tr>
        <tr><td colspan="4"></td></tr>
        <tr><td></td></tr>
    </table>
        <table style="text-align:center;">
          <tr> <td>  <asp:LinkButton ID="lnkFirst" runat="server"  CssClass="btncss"> << First</asp:LinkButton></td>
              <td> <asp:LinkButton ID="lnkPrevious" runat="server"  CssClass="btncss"> < Previous </asp:LinkButton></td>
             <td>  <asp:LinkButton ID="lnkNext" runat="server"  CssClass="btncss">Next > </asp:LinkButton></td>
              <td><asp:LinkButton ID="lnkLast" runat="server"  CssClass="btncss">Last >> </asp:LinkButton></td>
          </tr>
                </table>

Add the styles in Head section on webfrom.
  <style>
        .btncss
         {
padding:8px;
margin:2px;
background:#ffa100;
border:solid 1px #666;
font:8pt tahoma;
font-weight:bold;
color:#000;
        }
       table tr td
       {
           text-align:center;
          margin:5px;
           }
       table tr th
       {
            margin:5px;
            padding:5px;
           }
    </style>

Complete Html Markup of Webform:-

C#:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <style>
        .btncss
         {
padding:8px;
margin:2px;
background:#ffa100;
border:solid 1px #666;
font:8pt tahoma;
font-weight:bold;
color:#000;
        }
       table tr td
       {
           text-align:center;
          margin:5px;
           }
       table tr th
       {
            margin:5px;
            padding:5px;
           }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr><td>
            <asp:Repeater ID="rptsudentdetail" runat="server">
                <HeaderTemplate>
                    <table>
                          <thead>          
                <th>Student Name</th>
              <th>Fee</th>
                <th>Class </th>
                <th>Roll No.</th>
         
               </thead>
                </HeaderTemplate>
                <ItemTemplate>
                 <tr><td><%#DataBinder.Eval(Container, "DataItem.SudentName")%></td>
                     <td><%#DataBinder.Eval(Container, "DataItem.Fee")%></td>
                     <td><%#DataBinder.Eval(Container, "DataItem.StudentClass")%></td>
                     <td><%#DataBinder.Eval(Container, "DataItem.StudentRollNo")%></td>
                 </tr>
                </ItemTemplate>
            </asp:Repeater>
        </td></tr>
        <tr><td colspan="4"></td></tr>
        <tr><td></td></tr>
    </table>
        <table style="text-align:center;">
          <tr> <td>  <asp:LinkButton ID="lnkFirst" runat="server" OnClick="lnkFirst_Click"  CssClass="btncss"> << First</asp:LinkButton></td>
              <td> <asp:LinkButton ID="lnkPrevious" runat="server" OnClick="lnkPrevious_Click"  CssClass="btncss"> < Previous </asp:LinkButton></td>
             <td>  <asp:LinkButton ID="lnkNext" runat="server" OnClick="lnkNext_Click"  CssClass="btncss">Next > </asp:LinkButton></td>
              <td><asp:LinkButton ID="lnkLast" runat="server" OnClick="lnkLast_Click"  CssClass="btncss">Last >> </asp:LinkButton></td>
          </tr>
                </table>
    </div>
    </form>
</body>
</html>

VB:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
        <style>
        .btncss
         {
padding:8px;
margin:2px;
background:#ffa100;
border:solid 1px #666;
font:8pt tahoma;
font-weight:bold;
color:#000;
        }
        table tr td
       {
           text-align:center;
          margin:5px;
           }
       table tr th
       {
            margin:5px;
            padding:5px;
           }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr><td>
            <asp:Repeater ID="rptsudentdetail" runat="server">
                <HeaderTemplate>
                    <table>
                          <thead>
            <tr>
                <th><b>Student Name</b> </th>
              <th>Fee</th>
                <th>Class </th>
                <th>Roll No.</th>
             </tr>
               </thead>
                </HeaderTemplate>
                <ItemTemplate>
                 <tr><td><%#DataBinder.Eval(Container, "DataItem.SudentName")%></td>
                     <td><%#DataBinder.Eval(Container, "DataItem.Fee")%></td>
                     <td><%#DataBinder.Eval(Container, "DataItem.StudentClass")%></td>
                     <td><%#DataBinder.Eval(Container, "DataItem.StudentRollNo")%></td>
                 </tr>
                </ItemTemplate>
            </asp:Repeater>
        </td></tr>
        <tr><td colspan="4"></td></tr>
        <tr><td></td></tr>
    </table>
        <table style="text-align:center;">
          <tr> <td>  <asp:LinkButton ID="lnkFirst" runat="server"  CssClass="btncss"> << First</asp:LinkButton></td>
              <td> <asp:LinkButton ID="lnkPrevious" runat="server"  CssClass="btncss"> < Previous </asp:LinkButton></td>
             <td>  <asp:LinkButton ID="lnkNext" runat="server"  CssClass="btncss">Next > </asp:LinkButton></td>
              <td><asp:LinkButton ID="lnkLast" runat="server"  CssClass="btncss">Last >> </asp:LinkButton></td>
          </tr>
                </table>
    </div>
    </form>
</body>
</html>

Add the namespace.
C#:
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Collections;
VB:
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Collections

Now write the code to Bind the Repeater and do paging.
C#:
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
    public static int totalPages = 0;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindRepeater();
        }
    }
    public int Pageno
    {
        get
        {
            if (ViewState["pagenumber"] != null)

                return Convert.ToInt32(ViewState["pagenumber"]);
            else
                return 0;
        }
        set
        {
            ViewState["pagenumber"] = value;
        }

    }
    public void BindRepeater()
    {
        try
        {
            SqlDataAdapter adp = new SqlDataAdapter("Select * from Student_Detail", con);
            DataTable dt = new DataTable();
            adp.Fill(dt);
            PagedDataSource pagedatasource = new PagedDataSource();
            DataView dv = new DataView(dt);
            pagedatasource.DataSource = dv;
            pagedatasource.AllowPaging = true;
            pagedatasource.PageSize = 2;
            pagedatasource.CurrentPageIndex = Pageno;
            totalPages = pagedatasource.PageCount - 1;
            lnkPrevious.Enabled = !pagedatasource.IsFirstPage;
            lnkNext.Enabled = !pagedatasource.IsLastPage;
            lnkFirst.Enabled = !pagedatasource.IsFirstPage;
            lnkLast.Enabled = !pagedatasource.IsLastPage;
            ViewState["totpage"] = pagedatasource.PageCount;
            if (pagedatasource.PageCount > 1)
            {           
            rptsudentdetail.DataSource = pagedatasource;
            rptsudentdetail.DataBind();
            }           
        }
        catch (Exception ex)
        {
        }
    }

VB:
Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
    Public Shared totalPages As Integer = 0
    Protected Sub Page_Load(sender As Object, e As EventArgsHandles Me.Load
        If Not IsPostBack Then
            BindRepeater()
        End If
    End Sub
    Public Property Pageno() As Integer
        Get
            If ViewState("pagenumber"IsNot Nothing Then
                Return Convert.ToInt32(ViewState("pagenumber"))
            Else
                Return 0
            End If
        End Get
        Set(value As Integer)
            ViewState("pagenumber") = value
        End Set
    End Property
    Public Sub BindRepeater()
        Try
            Dim adp As New SqlDataAdapter("Select * from Student_Detail", con)
            Dim dt As New DataTable()
            adp.Fill(dt)
            Dim pagedatasource As New PagedDataSource()
            Dim dv As New DataView(dt)
            pagedatasource.DataSource = dv
            pagedatasource.AllowPaging = True
            pagedatasource.PageSize = 2
            pagedatasource.CurrentPageIndex = Pageno
            totalPages = pagedatasource.PageCount - 1
            lnkPrevious.Enabled = Not pagedatasource.IsFirstPage
            lnkNext.Enabled = Not pagedatasource.IsLastPage
            lnkFirst.Enabled = Not pagedatasource.IsFirstPage
            lnkLast.Enabled = Not pagedatasource.IsLastPage
            ViewState("totpage") = pagedatasource.PageCount
            If pagedatasource.PageCount > 1 Then
             rptsudentdetail.DataSource = pagedatasource
             rptsudentdetail.DataBind()
            End If            
        Catch ex As Exception
        End Try
    End Sub

Now write the code on First Link button click. When users click on this button it redirects the user to first page.
C#:
protected void lnkFirst_Click(object sender, EventArgs e)
    {
        lnkFirst.Attributes["style"] = "background-color:black;color:#fff";
        lnkPrevious.Attributes["style"] = "";
        lnkLast.Attributes["style"] = "";
        lnkNext.Attributes["style"] = "";
        Pageno = 0;
        BindRepeater();
    }

VB:
Protected Sub lnkFirst_Click(sender As Object, e As EventArgsHandles lnkFirst.Click
        lnkFirst.Attributes("style") = "background-color:black;color:#fff"
        lnkPrevious.Attributes("style") = ""
        lnkLast.Attributes("style") = ""
        lnkNext.Attributes("style") = ""
        Pageno = 0
        BindRepeater()
    End Sub

Similarly write the code on Last Link button click. When users click on this button it redirects the user to last page.
C#:
protected void lnkLast_Click(object sender, EventArgs e)
    {
        lnkLast.Attributes["style"] = "background-color:black;color:#fff";
        lnkFirst.Attributes["style"] = "";
        lnkPrevious.Attributes["style"] = "";
        lnkNext.Attributes["style"] = "";
        Pageno = (Convert.ToInt32(ViewState["totpage"]) - 1);
        BindRepeater();
    }

VB:
   Protected Sub lnkLast_Click(sender As Object, e As EventArgsHandles lnkLast.Click
        lnkLast.Attributes("style") = "background-color:black;color:#fff"
        lnkFirst.Attributes("style") = ""
        lnkPrevious.Attributes("style") = ""
        lnkNext.Attributes("style") = ""
        Pageno = (Convert.ToInt32(ViewState("totpage")) - 1)
        BindRepeater()
    End Sub

Write the code on Next link button. On click it will redirects the user to next page.
C#:
protected void lnkNext_Click(object sender, EventArgs e)
    {
        lnkNext.Attributes["style"] = "background-color:black;color:#fff";
        lnkFirst.Attributes["style"] = "";
        lnkPrevious.Attributes["style"] = "";
        lnkLast.Attributes["style"] = "";
        if (Pageno == totalPages)
        {
            Pageno = totalPages;
        }
        else
        {
            Pageno = Pageno + 1;
        }
        BindRepeater();
    }

VB:
Protected Sub lnkNext_Click(sender As Object, e As EventArgsHandles lnkNext.Click
        lnkNext.Attributes("style") = "background-color:black;color:#fff"
        lnkFirst.Attributes("style") = ""
        lnkPrevious.Attributes("style") = ""
        lnkLast.Attributes("style") = ""
        If Pageno = totalPages Then
            Pageno = totalPages
        Else
            Pageno = Pageno + 1
        End If
        BindRepeater()
    End Sub

Write the code on previous link button. On click it will redirects the user to previous page
C#:
protected void lnkPrevious_Click(object sender, EventArgs e)
    {
        lnkPrevious.Attributes["style"] = "background-color:black;color:#fff";
        lnkFirst.Attributes["style"] = "";
        lnkLast.Attributes["style"] = "";
        lnkNext.Attributes["style"] = "";
        if (Pageno == 0)
        {
            Pageno = 0;
        }
        else
        {
            Pageno = Pageno - 1;
        }
        BindRepeater();
    }

VB:
  Protected Sub lnkPrevious_Click(sender As Object, e As EventArgsHandles lnkPrevious.Click
        lnkPrevious.Attributes("style") = "background-color:black;color:#fff"
        lnkFirst.Attributes("style") = ""
        lnkLast.Attributes("style") = ""
        lnkNext.Attributes("style") = ""
        If Pageno = 0 Then
            Pageno = 0
        Else
            Pageno = Pageno - 1
        End If
        BindRepeater()
    End Sub

It is done. Now build, run the project and check the result.
Result:
How to Learn Implement Pagination in Repeater Control in Asp.net

In this article we have learn how to implement the Google style pagination in repeater control in Asp.net(C#,VB). I hope you enjoyed this article. 

No comments:

Post a Comment