Problem:
Some time we face situation where we need to display data in repeater and also provide paging to that repeater. Today I am going to demonstrate how can we bind repeater to a data source and update repeater using jQuery.
Solution:
Following are the main steps to achieve this:
- Create a page.
- Include jQuery.
- Take a repeater on aspx page.
- Put that repeater in a div (or any other element). We will use this div to add records
- Bind data to repeater on page load.
- Create pager for repeater.
- Call javascript function on click of pager items.
- Make a jquery hit to server with required parameters.
- Bind response to repeater container.
Following is the page and javascript code:
jQueryRepeater.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryRepeater.aspx.cs" Inherits="jQueryRepeater" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>[Nitin Dhiman] Bind repeater using
jQuery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function getdata(pageNo) {
$.ajax({
type: "POST",
url: "jQueryRepeater.aspx/GetData",
data: "{pageNo: " +
pageNo + "}",
contentType:
"application/json;
charset=utf-8",
dataType: "json",
success: function (response) {
var xmlDoc =
$.parseXML(response.d);
var xml = $(xmlDoc);
var row = "";
var images = xml.find("Table1");
$("#dvResult tbody").html("");
images.each(function () {
var image = $(this);
row = "
"
$("#dvResult tbody").append(row);
});
},
failure: function (response) {
alert("fail");
},
error: function (response) {
alert(response);
}
});
}
</script>
<style type="text/css">
body
{
font-family: Trebuchet MS;
}
#pager span
{
float: left;
cursor: pointer;
padding: 2px;
margin: 2px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
<div id="dvResult">
<asp:Repeater ID="rpResult" runat="server">
<HeaderTemplate>
<table>
<thead>
<th>Id</th>
<th>Name</th>
<th>Age</th>
<th>Email</th>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%#Eval("Id")%></td>
<td><%#Eval("Name")%></td>
<td><%#Eval("Age")%></td>
<td><%#Eval("Email")%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody>
</table>
</FooterTemplate>
</asp:Repeater>
</div>
<div id="pager">
<span onclick="javascript:getdata(1);">1</span>
<span onclick="javascript:getdata(2);">2</span>
<span onclick="javascript:getdata(3);">3</span>
<span onclick="javascript:getdata(4);">4</span>
<span onclick="javascript:getdata(5);">5</span>
<span onclick="javascript:getdata(6);">6</span>
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
jQueryRepeater.aspx.cs
using System;
using System.Data;
using System.Web.Services;
public partial class jQueryRepeater :
System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
BindData(1,
5);
}
void BindData(int PageNo, int PageSize)
{
int StrtIndx = (PageNo - 1) *
PageSize;
int EndIndx = (PageNo) *
PageSize;
DataTable dt =
GetDataTable();
DataTable dt2 = dt.Select("Id> " +
StrtIndx + " AND Id <= " + EndIndx + "").CopyToDataTable();
rpResult.DataSource = dt2;
rpResult.DataBind();
}
static DataTable GetDataTable()
{
DataTable dt = new DataTable();
DataColumn dc1 = new DataColumn("Id", typeof(Int32));
dt.Columns.Add(dc1);
DataColumn dc2 = new DataColumn("Name");
dt.Columns.Add(dc2);
DataColumn dc3 = new DataColumn("Age");
dt.Columns.Add(dc3);
DataColumn dc4 = new DataColumn("Email");
dt.Columns.Add(dc4);
DataRow dr;
dr =
dt.NewRow(); dr["Id"] = 1; dr["Name"] = "Nitin"; dr["Age"] = "23"; dr["Email"] = "nitin@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 2; dr["Name"] = "Rahul"; dr["Age"] = "24"; dr["Email"] = "rahul@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 3; dr["Name"] = "Sanjay"; dr["Age"] = "31"; dr["Email"] = "sanjay@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 4; dr["Name"] = "inay"; dr["Age"] = "34"; dr["Email"] = "inay@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 5; dr["Name"] = "Vinit"; dr["Age"] = "21"; dr["Email"] = "vinit@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 6; dr["Name"] = "Vijay"; dr["Age"] = "23"; dr["Email"] = "vijay@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 7; dr["Name"] = "Roop"; dr["Age"] = "26"; dr["Email"] = "roop@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 8; dr["Name"] = "Bikram"; dr["Age"] = "27"; dr["Email"] = "bikram@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 9; dr["Name"] = "Karan"; dr["Age"] = "32"; dr["Email"] = "karan@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 10; dr["Name"] = "Ajay"; dr["Age"] = "40"; dr["Email"] = "ajay@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 11; dr["Name"] = "Babita"; dr["Age"] = "37"; dr["Email"] = "babita@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 12; dr["Name"] = "Chaman"; dr["Age"] = "29"; dr["Email"] = "chaman@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 13; dr["Name"] = "Diwan"; dr["Age"] = "26"; dr["Email"] = "diwan@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 14; dr["Name"] = "Esha"; dr["Age"] = "28"; dr["Email"] = "esha@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 15; dr["Name"] = "Fred"; dr["Age"] = "25"; dr["Email"] = "fred@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 16; dr["Name"] = "Geeta"; dr["Age"] = "31"; dr["Email"] = "geeta@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 17; dr["Name"] = "Himmat"; dr["Age"] = "32"; dr["Email"] = "himmat@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 18; dr["Name"] = "Ivan"; dr["Age"] = "36"; dr["Email"] = "ivan@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 19; dr["Name"] = "Jacob"; dr["Age"] = "23"; dr["Email"] = "jacob@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 20; dr["Name"] = "Kamal"; dr["Age"] = "28"; dr["Email"] = "kamal@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 21; dr["Name"] = "Lalit"; dr["Age"] = "30"; dr["Email"] = "lalit@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 22; dr["Name"] = "Mohit"; dr["Age"] = "27"; dr["Email"] = "mohit@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 23; dr["Name"] = "Naveen"; dr["Age"] = "31"; dr["Email"] = "naveen@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 24; dr["Name"] = "Opender"; dr["Age"] = "27"; dr["Email"] = "opender@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 25; dr["Name"] = "Pushpa"; dr["Age"] = "25"; dr["Email"] = "pushpa@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 26; dr["Name"] = "Rohit"; dr["Age"] = "22"; dr["Email"] = "rohit@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 27; dr["Name"] = "Sumit"; dr["Age"] = "33"; dr["Email"] = "sumit@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 28; dr["Name"] = "Tejinder"; dr["Age"] = "27"; dr["Email"] = "tejinder@gmail.com"; dt.Rows.Add(dr);
dr =
dt.NewRow(); dr["Id"] = 29; dr["Name"] = "Umesh"; dr["Age"] = "22"; dr["Email"] = "umesh@gmail.com"; dt.Rows.Add(dr);
return dt;
}
[WebMethod]
public static object GetData(int pageNo)
{
int PageSize = 5;
int StrtIndx = (pageNo - 1) *
PageSize;
int EndIndx = (pageNo) *
PageSize;
DataTable dt =
GetDataTable();
DataTable dt2 = dt.Select("Id> " +
StrtIndx + " AND Id <= " + EndIndx + "").CopyToDataTable();
DataSet ds = new DataSet("results");
ds.Tables.Add(dt2);
return ds.GetXml();
}
}
No comments:
Post a Comment