ℹ️ 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.2 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.c-sharpcorner.com/article/auto-table-structure/ |
| Last Crawled | 2026-04-02 05:38:24 (7 days ago) |
| First Indexed | 2018-09-29 04:27:22 (7 years ago) |
| HTTP Status Code | 200 |
| Meta Title | Bind Auto Columns HTML Table Using jQuery/JSON |
| Meta Description | This article explains how to bind an HTML table to jQuery. without passing the column name in JSON data. |
| Meta Canonical | null |
| Boilerpipe Text | In my earlier articles, I have already explained how to bind an HTML table in jQuery with AJAX call using different methods. This article will explain how to bind the HTML table using JSON data but with the best method in which you do not require to append the table by specifying the column names. Just call the header function and pass the response in a list as a parameter that converts the list items into the table columns and appends it as a table header to the table using the For loop.
CRUD Operations Using AJAX/JSON
Power Of JSON/jQuery
Here is our table structure. In this, we have given different ids to both, the table and the table header. We do this just because our table header is appended in different functions and body is in a different function. Let's see this in details.
<
table
id
=
"jsonTable"
border
=
"1"
style
=
"border-collapse: collapse;"
cellpadding
=
"5"
>
<
thead
id
=
"av"
>
</
thead
>
</
table
>
After the table structure, add the bootstrap and jQuery files. Then, let us call the tablebind function in the document so as to bind the table at the time of page load.
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"
></script>
<link rel=
"stylesheet"
href=
"http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
/>
$(document).ready(
function
() {
tablebind();
});
Now, using an AJAX call, we can call the web method to bind the table. In my last article, I have already explained all the AJAX calling parameters so you can refer to them. In this procedure, what we do is to call a web method named bind, as given below, and convert the response from the JSON string to JavaScript object using ParseJSON. Then, by passing the data as a parameter, call the Columnheader function which returns the column header and using a Nested For Loop, we append each row in a row$ variable up to the number of records in the data and to the number of columns in a list the For Loop is iterated. After the loop work is done, we need to append the tr$ variable to the table using the id selector.
function
tablebind() {
$.ajax({
type:
"POST"
,
contentType:
"application/json; charset=utf-8"
,
url:
"ShipTo.aspx/binds"
,
data:
"{}"
,
dataType:
"json"
,
success:
function
(response) {
var
obj = $.parseJSON(response.d);
if
(obj.length > 0) {
var
data = obj[0].Table1;
var
table = $(
"<table />"
);
table[0].border =
"1"
;
var
row$;
var
columns = addAllColumnHeaders(data);
for
(
var
i = 0; i < data.length; i++) {
row$ = $(
'<tr/>'
);
for
(
var
colIndex = 0; colIndex < columns.length; colIndex++) {
var
cellValue = data[i][columns[colIndex]];
if
(cellValue ==
null
) { cellValue =
""
; }
row$.append($(
'<td/>'
).html(cellValue));
}
$(
"#jsonTable"
).append(row$);
}
}
},
error:
function
(response) {
}
});
}
Our result is already appended to the table above. Now, this function is used to make the table header. This is similar to the above method where we iterated the For Loop to make each <tr>. Now, in this, we need to push each column to the columnset. This method returns the list of the columns to the previous function and appends each <th> to the headertr$ to form the table header.
function
addAllColumnHeaders(myList) {
var
columnSet = [];
var
headerTr$ = $(
'<tr/>'
);
for
(
var
i = 0; i < myList.length; i++) {
var
rowHash = myList[i];
for
(
var
key
in
rowHash) {
if
($.inArray(key, columnSet) == -1) {
columnSet.push(key);
headerTr$.append($(
'<th/>'
).html(key));
}
}
}
$(
"#av"
).append(headerTr$);
return
columnSet;
}
There may be a condition that you don't want any column in the HTML table but the query is returning the column. In that case, you can pass the if condition with the column name in the addAllColumnsHeader function. See an example below.
function
addAllColumnHeaders(myList) {
var
columnSet = [];
var
headerTr$ = $(
'<tr/>'
);
for
(
var
i = 0; i < myList.length; i++) {
var
rowHash = myList[i];
for
(
var
key
in
rowHash) {
if
($.inArray(key, columnSet) == -1) {
if
(key !=
"ShipToId"
&& key !=
"GCRETEDON"
key !=
"userid"
) {
columnSet.push(key);
headerTr$.append($(
'<th/>'
).html(key));
}
}
}
}
$(
"#av"
).append(headerTr$);
return
columnSet;
}
Similarly, you might want to add an extra column to the HTML table, like edit and delete. For this, you have to change both the functions. Let's look at the changes in addAllColumnsHeader function first.
function
addAllColumnHeaders(myList) {
var
columnSet = [];
if
(myList.length > 0) {
var
headerTr$ = $(
'<tr/>'
);
headerTr$.append($(
'<th/>'
).html(
'Action'
));
}
for
(
var
i = 0; i < myList.length; i++) {
var
rowHash = myList[i];
for
(
var
key
in
rowHash) {
if
($.inArray(key, columnSet) == -1) {
if
(key !=
"
ShipToId
"
&& key !=
"GCRETEDON"
&& key !=
"userid"
) {
columnSet.push(key);
headerTr$.append($(
'<th/>'
).html(key));
}
}
}
}
$(
"#av"
).append(headerTr$);
return
columnSet;
}
Now, let's see the bind function's code.
function
tablebind() {
$.ajax({
type:
"POST"
,
contentType:
"application/json; charset=utf-8"
,
url:
"ShipTo.aspx/binds"
,
data:
""
,
dataType:
"json"
,
success:
function
(response) {
var
obj = $.parseJSON(response.d);
if
(obj.length > 0) {
var
data = obj[0].Table1;
var
table = $(
"<table />"
);
table[0].border =
"1"
;
var
row$;
var
columns = addAllColumnHeaders(data);
for
(
var
i = 0; i < data.length; i++) {
row$ = $(
'<tr/>'
);
row$.append($(
'<td/>'
).html(
'<img src="../images/edit_icon.jpg" id="'
+ data[i][
'ShipToId'
] +
'" onclick="edt(this)"><img src="../images/Delete1.png" id="'
+ data[i][
'ShipToId'
] +
'" onclick="dlt(this)"><img src="../images/view.png" id="'
+ data[i][
'ShipToId'
] +
'" onclick="pop(this)">'
));
for
(
var
colIndex = 0; colIndex < columns.length; colIndex++) {
var
cellValue = data[i][columns[colIndex]];
if
(cellValue ==
null
) { cellValue =
""
; }
row$.append($(
'<td/>'
).html(cellValue));
}
$(
"#jsonTable"
).append(row$);
}
sort();
}
},
error:
function
(response) {
}
});
}
In the above function, we added the row with two icons - edit and delete - which call their respective functions. Here, I am not explaining the edit and delete functions for those are explained in
my earlier article
. Now, our last step would be the web method that we call from our AJAX method.
[System.Web.Services.WebMethod(EnableSession =
true
), ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public
static
string
binds()
{
List<Dictionary<
string
, Object>> tables =
new
List<Dictionary<
string
,
object
>>();
List<Dictionary<
string
, Object>> rows =
null
;
Dictionary<
string
, Object> tab =
new
Dictionary<
string
,
object
>();
Dictionary<
string
, Object> row =
null
;
System.Web.Script.Serialization.JavaScriptSerializer serializer =
new
System.Web.Script.Serialization.JavaScriptSerializer();
SqlConnection con =
null
;
con = (SqlConnection)HttpContext.Current.Session[
"conn"
];
string
g3 =
"select
ShipToId
,category_code [Category Code],category_name
[Category Name]
,
GCRETEDON,
userid,status
from category"
;
SqlCommand cmdgla =
new
SqlCommand(g3, con);
cmdgla.Connection = con;
SqlDataAdapter adpgla =
new
SqlDataAdapter(cmdgla);
DataTable ndt =
new
DataTable();
adpgla.Fill(ndt);
DataTable dtadd =
new
DataTable();
DataRow dr1;
for
(
int
k = 0; k < ndt.Rows.Count; k++)
{
dr1 = dtadd.NewRow();
dtadd.Rows.Add(dr1);
}
DataSet ds =
new
DataSet();
ds.Tables.Add(ndt);
foreach
(DataTable dt
in
ds.Tables)
{
rows =
new
List<Dictionary<
string
,
object
>>();
foreach
(DataRow dr
in
ndt.Rows)
{
row =
new
Dictionary<
string
,
object
>();
foreach
(DataColumn dc
in
ndt.Columns)
{
row.Add(dc.ColumnName.Trim(), dr[dc]);
}
rows.Add(row);
}
tab.Add(ndt.TableName.Trim(), rows);
}
tables.Add(tab);
return
serializer.Serialize(tables);
}
Here is the final output with only edit action.
You can see how easy it is for you to bind an HTML table without specifying the table header row and the data rows. This can be a very helpful article for you to start working with JSON data using AJAX call. Also, you can follow the process mentioned above when you are having a bulk data and need to bind the HTML table. According to your requirement, you can edit these functions simply. |
| Markdown | null |
| Readable Markdown | In my earlier articles, I have already explained how to bind an HTML table in jQuery with AJAX call using different methods. This article will explain how to bind the HTML table using JSON data but with the best method in which you do not require to append the table by specifying the column names. Just call the header function and pass the response in a list as a parameter that converts the list items into the table columns and appends it as a table header to the table using the For loop.
- [CRUD Operations Using AJAX/JSON](https://www.c-sharpcorner.com/article/crud-operations-using/)
- [Power Of JSON/jQuery](https://www.c-sharpcorner.com/article/power-of-jsonjquery/)
Here is our table structure. In this, we have given different ids to both, the table and the table header. We do this just because our table header is appended in different functions and body is in a different function. Let's see this in details.
1. \<table id\="jsonTable" border\="1" style\="border-collapse: collapse;" cellpadding\="5"\>
2. \<thead id\="av"\>
3. \</thead\>
4. \</table\>
After the table structure, add the bootstrap and jQuery files. Then, let us call the tablebind function in the document so as to bind the table at the time of page load.
1. \<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"\>\</script\>
2. \<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /\>
3. \$(document).ready(function () {
4. tablebind();
5. });
Now, using an AJAX call, we can call the web method to bind the table. In my last article, I have already explained all the AJAX calling parameters so you can refer to them. In this procedure, what we do is to call a web method named bind, as given below, and convert the response from the JSON string to JavaScript object using ParseJSON. Then, by passing the data as a parameter, call the Columnheader function which returns the column header and using a Nested For Loop, we append each row in a row\$ variable up to the number of records in the data and to the number of columns in a list the For Loop is iterated. After the loop work is done, we need to append the tr\$ variable to the table using the id selector.
1. function tablebind() {
2. \$.ajax({
3. type: "POST",
4. contentType: "application/json; charset=utf-8",
5. url: "ShipTo.aspx/binds",
6. data: "{}",
7. dataType: "json",
8. success: function (response) {
9. var obj = \$.parseJSON(response.d);
10. if (obj.length \> 0) {
11. var data = obj\[0\].Table1;
12. var table = \$("\<table /\>");
13. table\[0\].border = "1";
14. var row\$;
15. var columns = addAllColumnHeaders(data);
16. for (var i = 0; i \< data.length; i++) {
17. row\$ = \$('\<tr/\>');
18. for (var colIndex = 0; colIndex \< columns.length; colIndex++) {
19. var cellValue = data\[i\]\[columns\[colIndex\]\];
20. if (cellValue == null) { cellValue = ""; }
21. row\$.append(\$('\<td/\>').html(cellValue));
22. }
23. \$("\#jsonTable").append(row\$);
24. }
25. }
26. },
27. error: function (response) {
28. }
29. });
30. }
Our result is already appended to the table above. Now, this function is used to make the table header. This is similar to the above method where we iterated the For Loop to make each \<tr\>. Now, in this, we need to push each column to the columnset. This method returns the list of the columns to the previous function and appends each \<th\> to the headertr\$ to form the table header.
1. function addAllColumnHeaders(myList) {
2. var columnSet = \[\];
3. var headerTr\$ = \$('\<tr/\>');
4. for (var i = 0; i \< myList.length; i++) {
5. var rowHash = myList\[i\];
6. for (var key in rowHash) {
7. if (\$.inArray(key, columnSet) == -1) {
8. columnSet.push(key);
9. headerTr\$.append(\$('\<th/\>').html(key));
10. }
11. }
12. }
13. \$("\#av").append(headerTr\$);
14. return columnSet;
15. }
There may be a condition that you don't want any column in the HTML table but the query is returning the column. In that case, you can pass the if condition with the column name in the addAllColumnsHeader function. See an example below.
1. function addAllColumnHeaders(myList) {
2. var columnSet = \[\];
3. var headerTr\$ = \$('\<tr/\>');
4. for (var i = 0; i \< myList.length; i++) {
5. var rowHash = myList\[i\];
6. for (var key in rowHash) {
7. if (\$.inArray(key, columnSet) == -1) {
8. if (key != "ShipToId" && key != "GCRETEDON" key != "userid") {
9. columnSet.push(key);
10. headerTr\$.append(\$('\<th/\>').html(key));
11. }
12. }
13. }
14. }
15. \$("\#av").append(headerTr\$);
16. return columnSet;
17. }
Similarly, you might want to add an extra column to the HTML table, like edit and delete. For this, you have to change both the functions. Let's look at the changes in addAllColumnsHeader function first.
1. function addAllColumnHeaders(myList) {
2. var columnSet = \[\];
3. if (myList.length \> 0) {
4. var headerTr\$ = \$('\<tr/\>');
5. headerTr\$.append(\$('\<th/\>').html('Action'));
6. }
7. for (var i = 0; i \< myList.length; i++) {
8. var rowHash = myList\[i\];
9. for (var key in rowHash) {
10. if (\$.inArray(key, columnSet) == -1) {
11. if (key != "ShipToId" && key != "GCRETEDON" && key != "userid") {
12. columnSet.push(key);
13. headerTr\$.append(\$('\<th/\>').html(key));
14. }
15. }
16. }
17. }
18. \$("\#av").append(headerTr\$);
19. return columnSet;
20. }
Now, let's see the bind function's code.
1. function tablebind() {
2. \$.ajax({
3. type: "POST",
4. contentType: "application/json; charset=utf-8",
5. url: "ShipTo.aspx/binds",
6. data: "",
7. dataType: "json",
8. success: function (response) {
9. var obj = \$.parseJSON(response.d);
10. if (obj.length \> 0) {
11. var data = obj\[0\].Table1;
12. var table = \$("\<table /\>");
13. table\[0\].border = "1";
14. var row\$;
15. var columns = addAllColumnHeaders(data);
16. for (var i = 0; i \< data.length; i++) {
17. row\$ = \$('\<tr/\>');
18. row\$.append(\$('\<td/\>').html('\<img src="../images/edit\_icon.jpg" id="' + data\[i\]\['ShipToId'\] + '" onclick="edt(this)"\>\<img src="../images/Delete1.png" id="' + data\[i\]\['ShipToId'\] + '" onclick="dlt(this)"\>\<img src="../images/view.png" id="' + data\[i\]\['ShipToId'\] + '" onclick="pop(this)"\>'));
19. for (var colIndex = 0; colIndex \< columns.length; colIndex++) {
20. var cellValue = data\[i\]\[columns\[colIndex\]\];
21. if (cellValue == null) { cellValue = ""; }
22. row\$.append(\$('\<td/\>').html(cellValue));
23. }
24. \$("\#jsonTable").append(row\$);
25. }
26. sort();
27. }
28. },
29. error: function (response) {
30. }
31. });
32. }
In the above function, we added the row with two icons - edit and delete - which call their respective functions. Here, I am not explaining the edit and delete functions for those are explained in [my earlier article](https://www.c-sharpcorner.com/article/crud-operations-using/). Now, our last step would be the web method that we call from our AJAX method.
1. \[System.Web.Services.WebMethod(EnableSession = true), ScriptMethod(ResponseFormat = ResponseFormat.Json)\]
2. public static string binds()
3. {
4. List\<Dictionary\<string, Object\>\> tables = new List\<Dictionary\<string, object\>\>();
5. List\<Dictionary\<string, Object\>\> rows = null;
6. Dictionary\<string, Object\> tab = new Dictionary\<string, object\>();
7. Dictionary\<string, Object\> row = null;
8. System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
9. SqlConnection con = null;
10. con = (SqlConnection)HttpContext.Current.Session\["conn"\];
11. string g3 = "select ShipToId,category\_code \[Category Code\],category\_name \[Category Name\],GCRETEDON,userid,status from category";
12. SqlCommand cmdgla = new SqlCommand(g3, con);
13. cmdgla.Connection = con;
14. SqlDataAdapter adpgla = new SqlDataAdapter(cmdgla);
15. DataTable ndt = new DataTable();
16. adpgla.Fill(ndt);
17. DataTable dtadd = new DataTable();
18. DataRow dr1;
19. for (int k = 0; k \< ndt.Rows.Count; k++)
20. {
21. dr1 = dtadd.NewRow();
22. dtadd.Rows.Add(dr1);
23. }
24. DataSet ds = new DataSet();
25. ds.Tables.Add(ndt);
26. foreach (DataTable dt in ds.Tables)
27. {
28. rows = new List\<Dictionary\<string, object\>\>();
29. foreach (DataRow dr in ndt.Rows)
30. {
31. row = new Dictionary\<string, object\>();
32. foreach (DataColumn dc in ndt.Columns)
33. {
34. row.Add(dc.ColumnName.Trim(), dr\[dc\]);
35. }
36. rows.Add(row);
37. }
38. tab.Add(ndt.TableName.Trim(), rows);
39. }
40. tables.Add(tab);
41. return serializer.Serialize(tables);
42. }
Here is the final output with only edit action.
![Bind Auto Columns HTML Table]()
You can see how easy it is for you to bind an HTML table without specifying the table header row and the data rows. This can be a very helpful article for you to start working with JSON data using AJAX call. Also, you can follow the process mentioned above when you are having a bulk data and need to bind the HTML table. According to your requirement, you can edit these functions simply. |
| Shard | 2 (laksa) |
| Root Hash | 5302293097463619802 |
| Unparsed URL | com,c-sharpcorner!www,/article/auto-table-structure/ s443 |