Issue to Update HTML Table after Data Insert using Ajax - asp.net

Question

I am new to Ajax.I tried to update my HTML table after successfully insert of data in database using Ajax instead of loading the entire form by using window.location.reload().
Insert Method
[WebMethod]
public static void SaveUser(Employee objEmployee) //Employee is the class
{
//My Code for insert
}
This works fine as the data inserts successfully.Ajax insert defined below
Update Method
public static void GetData() //Tried using datatable as return type nothing happened
{
//var dt = new DataTable();
using (var con = new SqlConnection(Constr))
{
const string query = "select * from TblUser";
using (var cmd = new SqlCommand(query, con))
{
using (var sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (TableData)
{
sda.Fill(TableData);
//return TableData;
}
}
}
}
}
On button save my ajax script is like this
<script type="text/javascript">
$(function () {
$("#btnSave").click(function () {
alert("TESST");
var user = {};
user.FName = $("#FirstName").val();
user.LName = $("#Surname").val();
user.MName = $("#MiddleName").val();
// Some others are also there
user.CreatedDateTime = new Date();
user.ModifiedDateTime = new Date();
$.ajax({
type: "POST",
url: "Default.aspx/SaveUser",
data: '{objEmployee: ' + JSON.stringify(user) + '}',
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function () {
alert("User has been added successfully.");
//Another Ajax to update the grid
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/GetData",
data: "{}",
dataType: "json",
success: function () {
},
error: function () {
alert("Error while Showing update data");
}
});
},
error: function () {
alert("Error while inserting data");
}
});
return false;
});
});
</script>
I have binded to HTML Table like this
<table id="dataTables-example" role="grid">
<thead>
<tr role="row">
<th>Name</th>
<th>Email Id</th>
<th>Mobile(H)</th>
<th >Mobile(O)</th>
<th>Joining Date</th>
<th>Birth Date</th>
</tr>
</thead>
<tbody>
<% for (var data = 0; data < TableData.Rows.Count; data++)
{ %>
<tr class="gradeA odd" role="row">
<td class="sorting_1"><%=TableData.Rows[data]["FName"]%></td>
<td><%=TableData.Rows[data]["EMail"]%></td>
<td><%=TableData.Rows[data]["Telephone"]%></td>
<td><%=TableData.Rows[data]["Mobile"]%></td>
<td><%=TableData.Rows[data]["DOJ"]%></td>
<td><%=TableData.Rows[data]["DOB"]%></td>
</tr>
<% } %>
</tbody>
</table>
My Issues
My update method is called after insert but I am not able to see the updated data.
After page refresh as the webmethod is static multiple data shows.

Answer 1

Loop trough the received data and set them to your table :
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/GetData",
data: "{}",
dataType: "json",
success: function (data) {
for (var i = 0; i < data.d.length; i++) {
$("#dataTables-example tbody").append("<tr><td>" + data.d[i].FName+ "
</td><td>" + data.d[i].EMail+ "</td><td>" + data.d[i].Telephone+ "
</td></tr>");
}
},
error: function () {
alert("Error while Showing update data");
}
});