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 EventArgs) Handles 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 EventArgs) Handles 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 EventArgs) Handles 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 EventArgs) Handles 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 EventArgs) Handles 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
Result:
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