ā¹ļø Skipped - page is already crawled
| Filter | Status | Condition | Details |
|---|---|---|---|
| HTTP status | PASS | download_http_code = 200 | HTTP 200 |
| Age cutoff | PASS | download_stamp > now() - 6 MONTH | 0.4 months ago |
| History drop | PASS | isNull(history_drop_reason) | No drop reason |
| Spam/ban | PASS | fh_dont_index != 1 AND ml_spam_score = 0 | ml_spam_score=0 |
| Canonical | PASS | meta_canonical IS NULL OR = '' OR = src_unparsed | Not set |
| Property | Value |
|---|---|
| URL | https://www.cheezycode.com/2015/08/create-html-table-using-jquery-ajax.html |
| Last Crawled | 2026-04-01 17:34:37 (11 days ago) |
| First Indexed | 2018-09-10 16:10:10 (7 years ago) |
| HTTP Status Code | 200 |
| Meta Title | Create Dynamic Table In JavaScript Using WebMethod And jQuery AJAX Without Postback |
| Meta Description | null |
| Meta Canonical | null |
| Boilerpipe Text | Create Dynamic Table In JavaScript Using WebMethod And jQuery AJAX Without Postback
Create HTML table from AJAX, JSON
In the world of rapidly evolving technologies people are doing great things in terms of user experience in websites. Gone are the days when people used to write every single code piece on server side and frequents postbacks were seen. Today we will learn how to create dynamic tables using jquery ajax using data from server side in the form of json object. The good thing will be that all would be done without having a postback.
What we will learn:
Some basic HTML structure for table
Jquery ajax syntax
Creation of WebMethod for ajax call
Using
JSON
object
What we need to know already:
Basic .Net (Here I will be using
C#
but you can have your way in VB .Net as well)
Basic JQuery Selector
Basic JavaScript
First create an aspx page where you need to create dynamic table. Place a table with an id given to it.
Your code will look something like this
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dynamic Table</title>
<--**Below is the reference for JQuery as it will be needed for the ajax call and table creation**-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
<!-- MAGIC HAPPENS HERE-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tblDynamic"></table>
</div>
</form>
</body>
</html>
Now we need to add script for ajax call which will bring the data in
JSON
format to be populated in table.
$.ajax({
method: "POST",
url: applicationURL + "Test.aspx/GetDynamicRows",
data: '{rowcount: "' + 10 + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//Code for table creation
}
});
As you can see in the
url
property of ajax call we have used the page name
Test.aspx
and following it is the name of the
WebMethod
Ā which is to be called on code behind
Test.aspx.cs
. Let's now see the code for writing the webmethod.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
/// <summary>
/// This method returns a list of type row having the values for columns.
/// </summary>
/// <param name="rowcount">Its used to specify the number of rows to return</param>
[System.Web.Services.WebMethod] //This webattribute is used to specify that its a webmethod
//public and static keywords are used here so that the javascript can access this method without any restriction
public static List<row> GetDynamicRows(int rowcount)
{
List<row> lstRows = new List<row>();
for (int i = 1; i <= rowcount; i++)
{
row rw = new row();
rw.Col1 = "Row " + i + " Column 1";
rw.Col2 = "Row " + i + " Column 2";
rw.Col3 = "Row " + i + " Column 3";
lstRows.Add(rw);
}
return lstRows;
}
public class row
{
public string Col1 { get; set; }
public string Col2 { get; set; }
public string Col3 { get; set; }
}
}
Now lets put some code into the success function of ajax call. Here we will put in some code to create html structure of the table using
trĀ
(row) &
tdĀ
(column) tags.
Response of Ajax call in JSON format
success: function (data) {
//Code for table creation
var jsonObj = data.d; //For storing the response data in jsonObj variable.
var strHTML = '';
$(jsonObj).each(function(){
var row= $(this)[0]; //Extracting out row object one by one.
strHTML += '<tr><td>' + row["Col1"] + '</td><td>'+ row["Col2"]Ā
+ '</td><td>'+ row["Col3"] + '</td></tr>';Ā
//Above code is for creating the html part of the table.
});
$('#tblDynamic').append(strHTML);//To append the html part into the table
}
Now when all being done you can have your table ready and your aspx page will look like this.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dynamic Table</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#tblDynamic td{border:1px solid grey;} /*Style added to show the actual structure of table*/
</style>
<script>
$.ajax({
method: "POST",
url: "Test.aspx/GetDynamicRows",
data: '{rowcount: "' + 10 + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var jsonObj = data.d; //For storing the response data in jsonObj variable.
var strHTML = '';
$(jsonObj).each(function(){
var row = $(this)[0]; //Extracting out row object one by one.
strHTML += '<tr><td>' + row["Col1"] + '</td><td>'+ row["Col2"] + '</td><td>'
+ row["Col3"] + '</td></tr>'; //For creating the html part of the table
});
$('#tblDynamic').append(strHTML);//To append the html part into the table
},
error:function()
{
alert('some error occurred');
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tblDynamic"></table>
</div>
</form>
</body>
</html>
And the output would be like this:
This is the generated html table by the code
Although the output isn't pretty but you can modify its appearance by using some css.
And in the similar way you can dynamically create any html element like list or even bind a dropdown. So this is it about creating html table using JQuery, Ajax and .Net. Feel free to write your queries and any suggestions that you have.
We have a made a video for this post, have a look. You will learn it better.
Happy Learning!!!
Popular posts from this blog
Kotlin Type Checking and Smart Cast with Examples
Ā Type Checking in Kotlin For certain scenarios, we need to check the type of the object i.e. we need to identify the class of the object before executing any function on that object. Consider a scenario where you have different types of objects in an array. You are looping on that array and executing some functionality. If you call a method that does not exist in the object, an error will be thrown at the runtime. To prevent such errors, we do type checking. In Kotlin, we have anĀ " is operator"Ā that helps in checking the type of the object. fun main() { var p1 = Person() if(p1 is Person) // Use of is operator { p1.sayHi() } } class Person{ fun sayHi() = println("Hi") } Explanation -Ā Here, we are checking the type of p1 instance that if it is of type Person - call its sayHi() method. In this case, it is evident that the object is of type Person only but for scenarios where we need to check the type - we use an "is operator"....
Polymorphism in Kotlin With Example
Polymorphism is one of the most important topics in Object-Oriented Programming. It goes hand in hand with Inheritance . Poly means many and morph means forms i.e. the same method behaves differently based on the object. Here we have different forms of the method that exhibits different behavior based on the object. To define Polymorphism in simple words - A parent can hold a reference to its child and can call methods which are provided by the parent class. Let's understand this with an example -Ā fun main() { val circle : Shape = Circle(4.0) val square : Shape = Square(4.0) } open class Shape{ open fun area() :Double{ return 0.0 } } class Circle(val radius:Double) : Shape(){ override fun area(): Double { return Math.PI * radius * radius } } class Square(val side:Double) : Shape(){ override fun area(): Double { return side * side } } Explanation - Ā Here we have defined a Shape class which is a base class and open ...
Kotlin Interfaces With Example
We can group classes based on what they are i.e. based on inheritance. The circle is a shape, Square is a shape - these classes belong to the Shape hierarchy because they are Shapes. We can also group classes based on what they do or what behavior they exhibit. A circle object can be dragged, a person object can be dragged - here we have grouped classes Circle and Person based on the behavior dragging . Even if the classes do not belong to a single class hierarchy, we can group them based on the behavior. This is where Interfaces come into the picture. Interface -Ā When you want your class to exhibit certain behavior irrespective of the class hierarchy they belong to - Use Interface. Interfaces help you to implement polymorphism based on the behavior defined in the interface. Methods defined in the interfaces are 100% abstract but in Kotlin you can also define methods that are non-abstract i.e. methods can have a body. Non-abstract methods in interfaces do not have any state they c... |
| Markdown | [Skip to main content](https://www.cheezycode.com/2015/08/create-html-table-using-jquery-ajax.html#main)
### Search
# [CheezyCode](https://www.cheezycode.com/)
Learn Android, JavaScript, and C\# Step By Step
### Create Dynamic Table In JavaScript Using WebMethod And jQuery AJAX Without Postback
- Get link
- Facebook
- X
- Pinterest
- Email
- Other Apps
[August 02, 2015](https://www.cheezycode.com/2015/08/create-html-table-using-jquery-ajax.html "permanent link")
| |
|---|
| [](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBsgJaXodUxLbcA0OOwFUNSYtsrVEvncVUPHo9BW2R0L3TXJqAyREb7jaUxdNYPfDPItGgx3HKppPY9jvd0rsToCCpWN-Jje0yPvbiiavWnBvf_B6Q3DcaZl4WMI19SnH8esn9jVLdZJAi/s1600/cheezycode_jsontotableajax.png) |
| Create HTML table from AJAX, JSON |
In the world of rapidly evolving technologies people are doing great things in terms of user experience in websites. Gone are the days when people used to write every single code piece on server side and frequents postbacks were seen. Today we will learn how to create dynamic tables using jquery ajax using data from server side in the form of json object. The good thing will be that all would be done without having a postback.
### What we will learn:
- Some basic HTML structure for table
- Jquery ajax syntax
- Creation of WebMethod for ajax call
- Using [JSON](http://www.cheezycode.com/2016/07/how-to-create-json-what-is-json.html) object
### What we need to know already:
- Basic .Net (Here I will be using [C\#](http://www.cheezycode.com/p/c-tutorial-with-examples.html) but you can have your way in VB .Net as well)
- Basic JQuery Selector
- Basic JavaScript
First create an aspx page where you need to create dynamic table. Place a table with an id given to it.
Your code will look something like this
```
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dynamic Table</title>
<--**Below is the reference for JQuery as it will be needed for the ajax call and table creation**-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
<!-- MAGIC HAPPENS HERE-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tblDynamic"></table>
</div>
</form>
</body>
</html>
```
Now we need to add script for ajax call which will bring the data in [JSON](http://www.cheezycode.com/2016/07/how-to-create-json-what-is-json.html) format to be populated in table.
```
$.ajax({
method: "POST",
url: applicationURL + "Test.aspx/GetDynamicRows",
data: '{rowcount: "' + 10 + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//Code for table creation
}
});
```
As you can see in the **url** property of ajax call we have used the page name **Test.aspx** and following it is the name of the **WebMethod** which is to be called on code behind **Test.aspx.cs**. Let's now see the code for writing the webmethod.
```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
/// <summary>
/// This method returns a list of type row having the values for columns.
/// </summary>
/// <param name="rowcount">Its used to specify the number of rows to return</param>
[System.Web.Services.WebMethod] //This webattribute is used to specify that its a webmethod
//public and static keywords are used here so that the javascript can access this method without any restriction
public static List<row> GetDynamicRows(int rowcount)
{
List<row> lstRows = new List<row>();
for (int i = 1; i <= rowcount; i++)
{
row rw = new row();
rw.Col1 = "Row " + i + " Column 1";
rw.Col2 = "Row " + i + " Column 2";
rw.Col3 = "Row " + i + " Column 3";
lstRows.Add(rw);
}
return lstRows;
}
public class row
{
public string Col1 { get; set; }
public string Col2 { get; set; }
public string Col3 { get; set; }
}
}
```
Now lets put some code into the success function of ajax call. Here we will put in some code to create html structure of the table using **tr** (row) & **td** (column) tags.
| |
|---|
| [](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXzK3khnyeNUIBTNI_TW1pmXDyLF1YlR7A_5joG7FDVhuFhqzpo4Rd7-SW12b5q_DuAHvn9pvD7Hnt4MWWd2ij2xF89DZ25Z5UF3bUdbFzlkIj2OrQP-BOAu-_4vLGnLXNUR19D9Jha2b8/s1600/cheezycode_jsonresponse.PNG) |
| Response of Ajax call in JSON format |
```
success: function (data) {
//Code for table creation
var jsonObj = data.d; //For storing the response data in jsonObj variable.
var strHTML = '';
$(jsonObj).each(function(){
var row= $(this)[0]; //Extracting out row object one by one.
strHTML += '<tr><td>' + row["Col1"] + '</td><td>'+ row["Col2"]Ā
+ '</td><td>'+ row["Col3"] + '</td></tr>';Ā
//Above code is for creating the html part of the table.
});
$('#tblDynamic').append(strHTML);//To append the html part into the table
}
```
Now when all being done you can have your table ready and your aspx page will look like this.
```
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dynamic Table</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#tblDynamic td{border:1px solid grey;} /*Style added to show the actual structure of table*/
</style>
<script>
$.ajax({
method: "POST",
url: "Test.aspx/GetDynamicRows",
data: '{rowcount: "' + 10 + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var jsonObj = data.d; //For storing the response data in jsonObj variable.
var strHTML = '';
$(jsonObj).each(function(){
var row = $(this)[0]; //Extracting out row object one by one.
strHTML += '<tr><td>' + row["Col1"] + '</td><td>'+ row["Col2"] + '</td><td>'
+ row["Col3"] + '</td></tr>'; //For creating the html part of the table
});
$('#tblDynamic').append(strHTML);//To append the html part into the table
},
error:function()
{
alert('some error occurred');
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tblDynamic"></table>
</div>
</form>
</body>
</html>
```
And the output would be like this:
| |
|---|
| [](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-hjQnt46ytyy9pzHeO8hPzmEcJCHp4GacfKCV7GOvWMp2IELHTNL-KTEgB2-T1wThZ3wGeHxkVabjCwZ5BvbC1FXv2Iy53fmIIR64ZTtHwh-ylC6PhK6CdpzArNbV1BDycQFGWzea09B2/s1600/cheezycode_output.PNG) |
| This is the generated html table by the code |
Although the output isn't pretty but you can modify its appearance by using some css.
And in the similar way you can dynamically create any html element like list or even bind a dropdown. So this is it about creating html table using JQuery, Ajax and .Net. Feel free to write your queries and any suggestions that you have.
> We have a made a video for this post, have a look. You will learn it better.
**Happy Learning!!\!**
[AJAX](https://www.cheezycode.com/search/label/AJAX) [HTML5](https://www.cheezycode.com/search/label/HTML5) [JSON](https://www.cheezycode.com/search/label/JSON) [WebMethod](https://www.cheezycode.com/search/label/WebMethod)
- Get link
- Facebook
- X
- Pinterest
- Email
- Other Apps
### Comments
#### Post a Comment
Hey there, liked our post. Let us know.
Please don't put promotional links. It doesn't look nice :)
### Popular posts from this blog
### [Kotlin Type Checking and Smart Cast with Examples](https://www.cheezycode.com/2021/09/kotlin-type-checking-and-smart-cast.html)
[September 02, 2021](https://www.cheezycode.com/2021/09/kotlin-type-checking-and-smart-cast.html "permanent link")
[](https://www.cheezycode.com/2021/09/kotlin-type-checking-and-smart-cast.html)
Type Checking in Kotlin For certain scenarios, we need to check the type of the object i.e. we need to identify the class of the object before executing any function on that object. Consider a scenario where you have different types of objects in an array. You are looping on that array and executing some functionality. If you call a method that does not exist in the object, an error will be thrown at the runtime. To prevent such errors, we do type checking. In Kotlin, we have an " is operator" that helps in checking the type of the object. fun main() { var p1 = Person() if(p1 is Person) // Use of is operator { p1.sayHi() } } class Person{ fun sayHi() = println("Hi") } Explanation - Here, we are checking the type of p1 instance that if it is of type Person - call its sayHi() method. In this case, it is evident that the object is of type Person only but for scenarios where we need to check the type - we use an "is operator"....
[Read more \>\>](https://www.cheezycode.com/2021/09/kotlin-type-checking-and-smart-cast.html "Kotlin Type Checking and Smart Cast with Examples")
### [Polymorphism in Kotlin With Example](https://www.cheezycode.com/2021/02/polymorphism-in-kotlin-with-example.html)
[February 09, 2021](https://www.cheezycode.com/2021/02/polymorphism-in-kotlin-with-example.html "permanent link")
[](https://www.cheezycode.com/2021/02/polymorphism-in-kotlin-with-example.html)
Polymorphism is one of the most important topics in Object-Oriented Programming. It goes hand in hand with Inheritance . Poly means many and morph means forms i.e. the same method behaves differently based on the object. Here we have different forms of the method that exhibits different behavior based on the object. To define Polymorphism in simple words - A parent can hold a reference to its child and can call methods which are provided by the parent class. Let's understand this with an example - fun main() { val circle : Shape = Circle(4.0) val square : Shape = Square(4.0) } open class Shape{ open fun area() :Double{ return 0.0 } } class Circle(val radius:Double) : Shape(){ override fun area(): Double { return Math.PI \* radius \* radius } } class Square(val side:Double) : Shape(){ override fun area(): Double { return side \* side } } Explanation - Here we have defined a Shape class which is a base class and open ...
[Read more \>\>](https://www.cheezycode.com/2021/02/polymorphism-in-kotlin-with-example.html "Polymorphism in Kotlin With Example")
### [Kotlin Interfaces With Example](https://www.cheezycode.com/2021/09/kotlin-interfaces-with-example.html)
[September 01, 2021](https://www.cheezycode.com/2021/09/kotlin-interfaces-with-example.html "permanent link")
[](https://www.cheezycode.com/2021/09/kotlin-interfaces-with-example.html)
We can group classes based on what they are i.e. based on inheritance. The circle is a shape, Square is a shape - these classes belong to the Shape hierarchy because they are Shapes. We can also group classes based on what they do or what behavior they exhibit. A circle object can be dragged, a person object can be dragged - here we have grouped classes Circle and Person based on the behavior dragging . Even if the classes do not belong to a single class hierarchy, we can group them based on the behavior. This is where Interfaces come into the picture. Interface - When you want your class to exhibit certain behavior irrespective of the class hierarchy they belong to - Use Interface. Interfaces help you to implement polymorphism based on the behavior defined in the interface. Methods defined in the interfaces are 100% abstract but in Kotlin you can also define methods that are non-abstract i.e. methods can have a body. Non-abstract methods in interfaces do not have any state they c...
[Read more \>\>](https://www.cheezycode.com/2021/09/kotlin-interfaces-with-example.html "Kotlin Interfaces With Example")
[Powered by Blogger](https://www.blogger.com/)
2014 - 2024 Ā© CHEEZYCODE
Other Websites - [FastOnlineTools](https://www.fastonlinetools.com/) |
| Readable Markdown | ### Create Dynamic Table In JavaScript Using WebMethod And jQuery AJAX Without Postback
| |
|---|
| [](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBsgJaXodUxLbcA0OOwFUNSYtsrVEvncVUPHo9BW2R0L3TXJqAyREb7jaUxdNYPfDPItGgx3HKppPY9jvd0rsToCCpWN-Jje0yPvbiiavWnBvf_B6Q3DcaZl4WMI19SnH8esn9jVLdZJAi/s1600/cheezycode_jsontotableajax.png) |
| Create HTML table from AJAX, JSON |
In the world of rapidly evolving technologies people are doing great things in terms of user experience in websites. Gone are the days when people used to write every single code piece on server side and frequents postbacks were seen. Today we will learn how to create dynamic tables using jquery ajax using data from server side in the form of json object. The good thing will be that all would be done without having a postback.
### What we will learn:
- Some basic HTML structure for table
- Jquery ajax syntax
- Creation of WebMethod for ajax call
- Using [JSON](http://www.cheezycode.com/2016/07/how-to-create-json-what-is-json.html) object
### What we need to know already:
- Basic .Net (Here I will be using [C\#](http://www.cheezycode.com/p/c-tutorial-with-examples.html) but you can have your way in VB .Net as well)
- Basic JQuery Selector
- Basic JavaScript
First create an aspx page where you need to create dynamic table. Place a table with an id given to it.
Your code will look something like this
```
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dynamic Table</title>
<--**Below is the reference for JQuery as it will be needed for the ajax call and table creation**-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
<!-- MAGIC HAPPENS HERE-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tblDynamic"></table>
</div>
</form>
</body>
</html>
```
Now we need to add script for ajax call which will bring the data in [JSON](http://www.cheezycode.com/2016/07/how-to-create-json-what-is-json.html) format to be populated in table.
```
$.ajax({
method: "POST",
url: applicationURL + "Test.aspx/GetDynamicRows",
data: '{rowcount: "' + 10 + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
//Code for table creation
}
});
```
As you can see in the **url** property of ajax call we have used the page name **Test.aspx** and following it is the name of the **WebMethod** which is to be called on code behind **Test.aspx.cs**. Let's now see the code for writing the webmethod.
```
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
/// <summary>
/// This method returns a list of type row having the values for columns.
/// </summary>
/// <param name="rowcount">Its used to specify the number of rows to return</param>
[System.Web.Services.WebMethod] //This webattribute is used to specify that its a webmethod
//public and static keywords are used here so that the javascript can access this method without any restriction
public static List<row> GetDynamicRows(int rowcount)
{
List<row> lstRows = new List<row>();
for (int i = 1; i <= rowcount; i++)
{
row rw = new row();
rw.Col1 = "Row " + i + " Column 1";
rw.Col2 = "Row " + i + " Column 2";
rw.Col3 = "Row " + i + " Column 3";
lstRows.Add(rw);
}
return lstRows;
}
public class row
{
public string Col1 { get; set; }
public string Col2 { get; set; }
public string Col3 { get; set; }
}
}
```
Now lets put some code into the success function of ajax call. Here we will put in some code to create html structure of the table using **tr** (row) & **td** (column) tags.
| |
|---|
| [](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXzK3khnyeNUIBTNI_TW1pmXDyLF1YlR7A_5joG7FDVhuFhqzpo4Rd7-SW12b5q_DuAHvn9pvD7Hnt4MWWd2ij2xF89DZ25Z5UF3bUdbFzlkIj2OrQP-BOAu-_4vLGnLXNUR19D9Jha2b8/s1600/cheezycode_jsonresponse.PNG) |
| Response of Ajax call in JSON format |
```
success: function (data) {
//Code for table creation
var jsonObj = data.d; //For storing the response data in jsonObj variable.
var strHTML = '';
$(jsonObj).each(function(){
var row= $(this)[0]; //Extracting out row object one by one.
strHTML += '<tr><td>' + row["Col1"] + '</td><td>'+ row["Col2"]Ā
+ '</td><td>'+ row["Col3"] + '</td></tr>';Ā
//Above code is for creating the html part of the table.
});
$('#tblDynamic').append(strHTML);//To append the html part into the table
}
```
Now when all being done you can have your table ready and your aspx page will look like this.
```
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Dynamic Table</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
#tblDynamic td{border:1px solid grey;} /*Style added to show the actual structure of table*/
</style>
<script>
$.ajax({
method: "POST",
url: "Test.aspx/GetDynamicRows",
data: '{rowcount: "' + 10 + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var jsonObj = data.d; //For storing the response data in jsonObj variable.
var strHTML = '';
$(jsonObj).each(function(){
var row = $(this)[0]; //Extracting out row object one by one.
strHTML += '<tr><td>' + row["Col1"] + '</td><td>'+ row["Col2"] + '</td><td>'
+ row["Col3"] + '</td></tr>'; //For creating the html part of the table
});
$('#tblDynamic').append(strHTML);//To append the html part into the table
},
error:function()
{
alert('some error occurred');
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tblDynamic"></table>
</div>
</form>
</body>
</html>
```
And the output would be like this:
| |
|---|
| [](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-hjQnt46ytyy9pzHeO8hPzmEcJCHp4GacfKCV7GOvWMp2IELHTNL-KTEgB2-T1wThZ3wGeHxkVabjCwZ5BvbC1FXv2Iy53fmIIR64ZTtHwh-ylC6PhK6CdpzArNbV1BDycQFGWzea09B2/s1600/cheezycode_output.PNG) |
| This is the generated html table by the code |
Although the output isn't pretty but you can modify its appearance by using some css.
And in the similar way you can dynamically create any html element like list or even bind a dropdown. So this is it about creating html table using JQuery, Ajax and .Net. Feel free to write your queries and any suggestions that you have.
> We have a made a video for this post, have a look. You will learn it better.
**Happy Learning!!\!**
### Popular posts from this blog
### [Kotlin Type Checking and Smart Cast with Examples](https://www.cheezycode.com/2021/09/kotlin-type-checking-and-smart-cast.html)
[](https://www.cheezycode.com/2021/09/kotlin-type-checking-and-smart-cast.html)
Type Checking in Kotlin For certain scenarios, we need to check the type of the object i.e. we need to identify the class of the object before executing any function on that object. Consider a scenario where you have different types of objects in an array. You are looping on that array and executing some functionality. If you call a method that does not exist in the object, an error will be thrown at the runtime. To prevent such errors, we do type checking. In Kotlin, we have an " is operator" that helps in checking the type of the object. fun main() { var p1 = Person() if(p1 is Person) // Use of is operator { p1.sayHi() } } class Person{ fun sayHi() = println("Hi") } Explanation - Here, we are checking the type of p1 instance that if it is of type Person - call its sayHi() method. In this case, it is evident that the object is of type Person only but for scenarios where we need to check the type - we use an "is operator"....
### [Polymorphism in Kotlin With Example](https://www.cheezycode.com/2021/02/polymorphism-in-kotlin-with-example.html)
[](https://www.cheezycode.com/2021/02/polymorphism-in-kotlin-with-example.html)
Polymorphism is one of the most important topics in Object-Oriented Programming. It goes hand in hand with Inheritance . Poly means many and morph means forms i.e. the same method behaves differently based on the object. Here we have different forms of the method that exhibits different behavior based on the object. To define Polymorphism in simple words - A parent can hold a reference to its child and can call methods which are provided by the parent class. Let's understand this with an example - fun main() { val circle : Shape = Circle(4.0) val square : Shape = Square(4.0) } open class Shape{ open fun area() :Double{ return 0.0 } } class Circle(val radius:Double) : Shape(){ override fun area(): Double { return Math.PI \* radius \* radius } } class Square(val side:Double) : Shape(){ override fun area(): Double { return side \* side } } Explanation - Here we have defined a Shape class which is a base class and open ...
### [Kotlin Interfaces With Example](https://www.cheezycode.com/2021/09/kotlin-interfaces-with-example.html)
[](https://www.cheezycode.com/2021/09/kotlin-interfaces-with-example.html)
We can group classes based on what they are i.e. based on inheritance. The circle is a shape, Square is a shape - these classes belong to the Shape hierarchy because they are Shapes. We can also group classes based on what they do or what behavior they exhibit. A circle object can be dragged, a person object can be dragged - here we have grouped classes Circle and Person based on the behavior dragging . Even if the classes do not belong to a single class hierarchy, we can group them based on the behavior. This is where Interfaces come into the picture. Interface - When you want your class to exhibit certain behavior irrespective of the class hierarchy they belong to - Use Interface. Interfaces help you to implement polymorphism based on the behavior defined in the interface. Methods defined in the interfaces are 100% abstract but in Kotlin you can also define methods that are non-abstract i.e. methods can have a body. Non-abstract methods in interfaces do not have any state they c... |
| Shard | 170 (laksa) |
| Root Hash | 4492958221110264570 |
| Unparsed URL | com,cheezycode!www,/2015/08/create-html-table-using-jquery-ajax.html s443 |