Hi ShaibaazS,
Refer the below code.
Here I am making use of Microsoft’s Northwind Database. The download and install instructions are provided in the following article.
HTML
<div id="dvCustomers">
<table id="tblCustomers" class="tblCustomers" cellpadding="2" cellspacing="0" border="1">
<tr>
<th>
<b>Name </b>
</th>
<th>
<b>City </b>
</th>
<th>
<b>Postal Code </b>
</th>
<th>
<b>Country </b>
</th>
<th>
<b>Phone </b>
</th>
<th>
<b>Fax </b>
</th>
</tr>
<tr>
<td>
<span class="name"></span>
</td>
<td>
<span class="city"></span>
</td>
<td>
<span class="postal"></span>
</td>
<td>
<span class="country"></span>
</td>
<td>
<span class="phone"></span>
</td>
<td>
<span class="fax"></span>
</td>
</tr>
</table>
</div>
<div>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
border-collapse: collapse;
background-color: #fff;
width: 200px;
}
table th
{
background-color: #B8DBFD;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border: 1px solid #ccc;
}
table, table table td
{
border: 0px solid #ccc;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "CS.aspx/GetCustomers",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(response.responseText);
}
});
});
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
var customers = xml.find("Customers");
var row = $("[id*=tblCustomers] > tbody tr:last-child").clone(true);
$("[id*=tblCustomers] tr").not(':has(th)').remove();
$.each(customers, function () {
$(".name", row).html($(this).find("ContactName").text());
$(".city", row).html($(this).find("City").text());
$(".postal", row).html($(this).find("PostalCode").text());
$(".country", row).html($(this).find("Country").text());
$(".phone", row).html($(this).find("Phone").text());
$(".fax", row).html($(this).find("Fax").text());
$("[id*=tblCustomers]").append(row);
row = $("[id*=tblCustomers] > tbody tr:last-child").clone(true);
});
}
</script>
</div>
Code
[WebMethod]
public static string GetCustomers()
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT TOP 10 * FROM Customers"))
{
cmd.Connection = con;
DataSet ds = new DataSet();
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
sda.Fill(ds, "Customers");
}
return ds.GetXml();
}
}
}
Screenshot
