JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<div id="demo">
</div>
JavaScript
//Class definition function
function Browser(browserData) {
//Browser initialization constructor
if (browserData) {
this.setData(browserData);
}
}
//Class Methods
Browser.prototype = {
setData: function (browserData) {
$.extend(true,this,browserData);
return this;
}
}
var browser1 = new Browser({
"DT_RowId":1,
"Engine":"Trident",
"Browser":"Internet Explorer 4.0",
"Platform":"Win 95+",
"Version":"4",
"Grade":"X"
});
var browser2 = new Browser({
"DT_RowId":2,
"Engine":"Trident",
"Browser":"Internet Explorer 5.0",
"Platform":"Win 95+",
"Version":"5",
"Grade":"C"
});
var browser3 = new Browser({
"DT_RowId":3,
"Engine":"Trident",
"Browser":"Internet Explorer 5.5",
"Platform":"Win 95+",
"Version":"5.5",
"Grade":"A"
});
var browser4 = new Browser({
"DT_RowId":4,
"Engine":"Trident",
"Browser":"Internet Explorer 6",
"Platform":"Win 98+",
"Version":"6",
"Grade":"A"
});
var browserArray = [browser1,browser2,browser3,browser4];
//Class definition function
function Column(columnSettings) {
//Column initialization constructor
if (columnSettings) {
this.setData(columnSettings);
}
}
//Class Methods
Column.prototype = {
setData: function (columnSettings) {
$.extend(true,this,columnSettings);
return this;
},
constructor: function() {}
}
var EngineColumn = new Column({ "title":"Engine" });
var BrowserColumn = new Column({ "title": "Browser" });
var PlatformColumn = new Column({ "title": "Platform" });
var VersionColumn = new Column({ "title": "Version", "class": "center" });
var GradeColumn = new Column({ "title": "Grade", "class": "center" });
var columns = [EngineColumn,BrowserColumn,PlatformColumn,VersionColumn,GradeColumn];
$(document).ready(function() {
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>'...