I have JSON data which i need to displayed in a table and then apply datatable on that table. Some part of the table is static while others must be created dynamically. There will be dynamic headers and offcource the data data to be shown will be taken from JSON. My Static HTML Code is as follows
<table border="1" align="center" id="info-table">
<thead>
<tr>
<th>Roll No</th>
<th>Student Name</th>
<th>Student ID</th>
<th>Class</th>
Now i have to dynamically add more headers so for that i am using $.each. After that i need to add The TD's to show the data. The code is as follows
obj = $.parseJSON(json.responseText);
if (obj.collection.response.error) {
displayError(obj.collection.response.error);
} else {
//Prepare fields for Attendance codes
$.each(obj.collection.response.attendanceCodes, function(key, value){
$('#info-table tr').append("<th>"+value.title+"</th>");
});
//Add the static headers
$('#info-table tr').append("<th>Teacher Comment</th><th>Admin Comment</th></tr></thead><tbody>");
//Prepare fields for EachStudent
$.each(obj.collection.response, function(i, val){
if(i != 'attendanceCodes'){
$('#info-table').append("<tr><td>"+val.rollNo+"</td><td>"+val.studentName+"</td><td>"+val.studentId+"</td><td>"+val.className+"</td><td align=\"center\"><div class=\"radio-green\"><input type=\"radio\" checked=\"checked\" name=\"attend-"+val.studentId+"\" /></div></td><td align=\"center\"><div class=\"radio-red\"><input type=\"radio\" name=\"attend-"+val.studentId+"\" /></div></td><td><input type=\"text\" style=\"width:200px;\" name=\"teacher-comment-"+val.studentId+"\" /></td><td>- - -</td><td></td><td></td><td></td><td></td></tr>");
}
});
//$('#info-table').dataTable();
}
},
dataType:"JSON"
But this code is not working and i am getting error in console that says: Uncaught TypeError: Cannot read property 'childNodes' of null