Universal html template

Build and share your cool customized reports built w/ one sql, Chart.js and Lua

Moderator: Renato

Post Reply
Nikolay
MMEX Developer
Posts: 1535
Joined: Sat Dec 06, 2008 2:27 pm
Are you a spam bot?: No
Location: Sankt-Petersburg, Russia

Universal html template

Post by Nikolay »

Here is an universal html template. The output result will be chatged if SQL query will changed.
For example for sql 

Code: Select all

 select * from assets_v1 
Output is : 
Screenshot_1.png
(6.18 KiB) Downloaded 1415 times
for 

Code: Select all

 select * from payee_v1
will: 
Screenshot_2.png
Screenshot_2.png (3.43 KiB) Viewed 3521 times

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Andre's JSON Table</title>
    <link href = "master.css" rel = "stylesheet" /> 
    <script src = "ChartNew.js"></script> 
    <script src="sorttable.js"></script>
</head>
<body onload="loadingBody()">
<table class="table" id="mytable">
</table>
</body>
<script>
var json =<TMPL_VAR JSONCONTENTS>;
var _tbody_ = document.createElement('tbody'),
   _thead_ = document.createElement('thead'),
    _tr_ = document.createElement('tr'),
    _th_ = document.createElement('th'),
    _td_ = document.createElement('td');
// Builds the HTML Table out of myList json data from Ivy restful service.
 function buildHtmlTable(arr) {
     var tbody = _tbody_.cloneNode(false);
     for (var i=0, maxi=arr.length; i < maxi; ++i) {
         var tr = _tr_.cloneNode(false);
        for (var key in arr[i]) {
             if (arr[i].hasOwnProperty(key)) {
             var td = _td_.cloneNode(false);
                 td.appendChild(document.createTextNode(arr[i][key] || ''));
             }
        tr.appendChild(td);
        }
        tbody.appendChild(tr);
    } 
     return tbody;
 }
 function getColumnHeaders(arr)
 {
     var thead = _thead_.cloneNode(false);
     var tr = _tr_.cloneNode(false);
     for (var i=0, l=1; i < l; i++) {
         for (var key in arr[i]) {
             if (arr[i].hasOwnProperty(key)) {
                 var th = _th_.cloneNode(false);
                 th.appendChild(document.createTextNode(key));
                 tr.appendChild(th);
             }
         }
         thead.appendChild(tr);
     }
     return thead;
 }
 
//document.getElementById('myhead').innerHTML = '';
document.getElementById('mytable').appendChild(getColumnHeaders(json));
document.getElementById('mytable').appendChild(buildHtmlTable(json));
</script>
</html>
Post Reply