Grid implemented in js file:
jQuery.fn.Grid = function(options) {
if(options == undefined || options.data == undefined) return;
var html = "";
var realColumnsNames = [];
var headerColumnsNames = [];
var columns = [];
html += '<table id="table">';
html += '<thead id="tableHead">';
html += '<tr id="tableHeadTr">';
if(options.columns == undefined || options.columns.length == 0) {
for (var objName in options.data[0]) {
html += '<th id="' + objName + '">' + objName + '</th>';
realColumnsNames.push(objName);
}
}
else {
for (var i = 0; i < options.columns.length; i++) {
objName = options.columns[i];
html += '<th id="' + objName + '">' + objName + '</th>';
}
for (var objName in options.data[0]) {
realColumnsNames.push(objName);
}
}
html += '</tr>';
html += '</thead>';
$.each(options.data, function (index, value) {
html += "<tr class='tableRow'>";
for (var i = 0; i < realColumnsNames.length; i++) {
html += "<td>" + value[realColumnsNames[i]] + "</td>";
}
html += "</tr>";
})
html += '</table>';
this[0].innerHTML = html;
};
And Usage in HTML:
<body>
<div id="Grid"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/Grid.js"></script>
<script>
var data = JSON.parse('[{"Name" : "Name", "Surname" : "SName"},' +
'{"Name" : "Name", "Surname" : "SName"}, ' +
'{"Name" : "Name", "Surname" : "SName"},' +
'{"Name" : "Name", "Surname" : "SName"}]');
var options = {
data: data,
columns: ['First Name', 'Second Name']
};
$('#Grid').Grid(options);
</script>
</body>
jQuery.fn.Grid = function(options) {
if(options == undefined || options.data == undefined) return;
var html = "";
var realColumnsNames = [];
var headerColumnsNames = [];
var columns = [];
html += '<table id="table">';
html += '<thead id="tableHead">';
html += '<tr id="tableHeadTr">';
if(options.columns == undefined || options.columns.length == 0) {
for (var objName in options.data[0]) {
html += '<th id="' + objName + '">' + objName + '</th>';
realColumnsNames.push(objName);
}
}
else {
for (var i = 0; i < options.columns.length; i++) {
objName = options.columns[i];
html += '<th id="' + objName + '">' + objName + '</th>';
}
for (var objName in options.data[0]) {
realColumnsNames.push(objName);
}
}
html += '</tr>';
html += '</thead>';
$.each(options.data, function (index, value) {
html += "<tr class='tableRow'>";
for (var i = 0; i < realColumnsNames.length; i++) {
html += "<td>" + value[realColumnsNames[i]] + "</td>";
}
html += "</tr>";
})
html += '</table>';
this[0].innerHTML = html;
};
And Usage in HTML:
<body>
<div id="Grid"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/Grid.js"></script>
<script>
var data = JSON.parse('[{"Name" : "Name", "Surname" : "SName"},' +
'{"Name" : "Name", "Surname" : "SName"}, ' +
'{"Name" : "Name", "Surname" : "SName"},' +
'{"Name" : "Name", "Surname" : "SName"}]');
var options = {
data: data,
columns: ['First Name', 'Second Name']
};
$('#Grid').Grid(options);
</script>
</body>
