Using the same article Bind data to GridView with jQuery or JSON in ASP.Net, I have made some changes in the jQuery function.
The code and SP remains the same.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
.Pager span, .Pager a
{
display: inline-block;
height: 25px;
min-width: 25px;
line-height: 25px;
text-align: center;
text-decoration: none;
border: 1px solid #ccc;
}
.Pager span
{
background-color: #eee;
color: #000;
}
.Pager a
{
background-color: #6C6C6C;
color: #fff !important;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="ASPSnippets_Pager.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
GetCustomers(1);
});
$(".Pager .page").live("click", function () {
GetCustomers(parseInt($(this).attr('page')));
});
function GetCustomers(pageIndex) {
$.ajax({
type: "POST",
url: "CS.aspx/GetCustomers",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Customers");
var row = $("[id*=gvCustomers] tr:last-child").clone(true);
$("[id*=gvCustomers] tr").not($("[id*=gvCustomers] tr:first-child")).remove();
$.each(customers, function () {
var customer = $(this);
$("td", row).eq(0).html($(this).find("CustomerID").text());
//Find TextBox using ClassName and set Value.
$(".ContactName", row).val($(this).find("ContactName").text());
$(".City", row).val($(this).find("City").text());
$("[id*=gvCustomers]").append(row);
row = $("[id*=gvCustomers] tr:last-child").clone(true);
});
var pager = xml.find("Pager");
$(".Pager").ASPSnippets_Pager({
ActiveCssClass: "current",
PagerCssClass: "pager",
PageIndex: parseInt(pager.find("PageIndex").text()),
PageSize: parseInt(pager.find("PageSize").text()),
RecordCount: parseInt(pager.find("RecordCount").text())
});
};
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField ItemStyle-Width="150px" DataField="CustomerID" HeaderText="CustomerID" />
<asp:TemplateField ItemStyle-Width="150px" HeaderText="Contact Name">
<ItemTemplate>
<asp:TextBox runat="server" CssClass="ContactName" Text='<%# Eval("ContactName") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="150px" HeaderText="City">
<ItemTemplate>
<asp:TextBox runat="server" CssClass="City" Text='<%# Eval("City") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<div class="Pager">
</div>
</form>
</body>
</html>
Screenshot
