How to create table with grid filled with data in DataTable? - html

Question

I have dataTable and returns correct data, but the UI is my problem meaning it does not have columns and sorting are not looking good, here is my logic below and need some help to make look good. I have also attached the back end code for clarity as to why this code, User Interface does not have rows with data grid columns.
[![enter image description here][1]][1]
<!--Building some table here that filters data from db-->
<div style="width:90%; margin:0 auto;">
<table id="eNtsaCourseLists">
<thead>
<tr>
<th>Id</th>
<th>Course</th>
<th>Nickname</th>
<th>Term</th>
<th>Published</th>
<th>CourseLicence</th>
</tr>
</thead>
</table>
</div>
<style>
tr.even {
background-color: #F5F5F5 !important;
}
</style>
<link href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
</center>
<!--Javascript functionality for dataTable-->
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script>
$(function () {
$("#eNtsaCourseLists").dataTable({
"ajax": {
"url": "/Home/loadTableResults",
"type": "GET",
"datatype": "json"
},
"columns": [
{ "data": "Id", "autowidth": true },
{ "data": "Course", "autowidth": true },
{ "data": "Nickname", "autowidth": true },
{ "data": "Term", "autowidth": true },
{ "data": "Published", "autowidth": true },
{"data": "CourseLicence", "autowidth":true}
]
});
});
</script>
public ActionResult loadTableResults()
{
//RegCoursesViewModel regCourses = new RegCoursesViewModel();
using (eNtsaRegistration_2 vb = new eNtsaRegistration_2())
{
var data = vb.Courses.OrderBy(n => n.Course).ToList();
return Json(new { data = data }, JsonRequestBehavior.AllowGet);
}
}
[1]: https://i.stack.imgur.com/wF76c.png