I need to create dynamic html table from json.
I need to create dynamic html table from json.
bmchheda1
Posts: 1Questions: 1Answers: 0
Hi,
I need to create dynamic html table from json.
Also the coloumn names and coloum numbers are created at runtime from codebehind c# and passed as json.
The json is created from codebehind from asp.net c# code.
I am getting error as Uncaught TypeError: Cannot read property 'aDataSort' of undefined
Below is my HTML code :
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.js">
</script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
function ShowData() {
$.ajax({
type: "POST",
url: "Default7.aspx/ConvertDataTabletoJson",
data: '{m_date: "1" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var json = JSON.parse(response.d);
var tableHeaders;
$.each(json.columns, function (i, val) {
tableHeaders += "<th>" + val + "</th>";
});
$("#tableDiv").empty();
$("#tableDiv").append('<table id="displayTable" class="display" cellspacing="0" width="100%"><thead><tr>' + tableHeaders + '</tr></thead></table>');
$('#displayTable').DataTable({
"order": [1, "asc"],
});
$('#displayTable').DataTable(json);
},
failure: function (response) {
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btnShowData" value="Show Data" onclick="ShowData()" />
<div id="tableDiv"></div>
</div>
</form>
</body>
</html>
Below is my Codebehind C# code :
[System.Web.Services.WebMethod]
public static string ConvertDataTabletoJson()
{
DataTable dt = new DataTable();
dt.Columns.Add("ID");
dt.Columns.Add("FName");
dt.Columns.Add("LName");
dt.Columns.Add("Title");
DataRow dr1 = dt.NewRow();
dr1["ID"] = "01";
dr1["FName"] = "02";
dr1["LName"] = "03";
dr1["Title"] = "04";
dt.Rows.Add(dr1);
DataRow dr2 = dt.NewRow();
dr2["ID"] = "11";
dr2["FName"] = "12";
dr2["LName"] = "13";
dr2["Title"] = "17";
dt.Rows.Add(dr2);
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
return serializer.Serialize(rows);
}
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This discussion has been closed.
Answers
I was getting that aDataSort error prior to initializing the DataTable with an object of parameters. I'm not sure how you would initialize your table with your json variable though.
We'd really need a test case, or at least the rendered JSON, but if the data for the table is in the JSON object, use
datato pass it in to DataTables during the constructor phase, orrows.add()after.Allan