<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
var myList = @Html.Raw(ViewBag.Table);
// Builds the HTML Table out of myList.
function buildHtmlTable(selector) {
var columns = addAllColumnHeaders(myList, selector);
for (var i = 0; i < myList.length; i++) {
for (var colIndex = 0; colIndex < columns.length; colIndex++) {
var cellValue = myList[i][columns[colIndex]];
if (cellValue == null) cellValue = "";
row$.append($('<td/>').html(cellValue));
$(selector).append(row$);
// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
function addAllColumnHeaders(myList, selector) {
var headerTr$ = $('<tr/>');
for (var i = 0; i < myList.length; i++) {
for (var key in rowHash) {
if ($.inArray(key, columnSet) == -1) {
headerTr$.append($('<th/>').html(key));
$(selector).append(headerTr$);
<body onLoad="buildHtmlTable('#DataTable')">
<table id="DataTable" border="1">