Build and share your cool customized reports built w/ one sql, Chart.js and Lua
Moderator: Renato
-
Nikolay
- Developer
- Posts: 1535
- Joined: Sat Dec 06, 2008 2:27 pm
- Are you a spam bot?: No
- Location: Sankt-Petersburg, Russia
Post
by Nikolay »
image.png
SQL
htt
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" />
<link href="master.css" rel="stylesheet"></link>
<title>Andre's JSON Table</title>
</head>
<body onload="loadingBody()">
<p>JSON string <div id="myjson"></div></p>
<p>Table <div id="mytable"></div></p>
</body>
<script>
function loadingBody(){
var json =<TMPL_VAR JSONCONTENTS>;
document.getElementById('myjson').innerHTML=JSON.stringify(json);
if(json.length > 0){
displayData(json);
}
else{
document.getElementById('mytable').innerHTML='No records found!';
}
}
function createTableRowContent(rowObject, data, cellType){
var rowContent = document.createElement(cellType);
var cell = document.createTextNode(data);
rowContent.appendChild(cell);
rowObject.appendChild(rowContent);
}
function createTableData(rowObject, data){
createTableRowContent(rowObject, data, 'td');
}
function createTableHeader(rowObject, data){
createTableRowContent(rowObject, data, 'th');
}
function displayData(jsonData){
var table = document.createElement('table');
table.border = "1";
var thead = document.createElement('thead');
table.appendChild(thead);
var row = document.createElement('tr');
for(var prop in jsonData[0]){
createTableHeader(row, prop);
}
thead.appendChild(row);
var tbody = document.createElement('tbody');
table.appendChild(tbody);
for(var obj in jsonData){
var row = document.createElement('tr');
for(var prop in jsonData[obj]){
createTableData(row, jsonData[obj][prop]);
}
tbody.appendChild(row);
}
document.getElementById('mytable').innerHTML = '';
document.getElementById('mytable').appendChild(table);
}
</script>
</html>
Original article:
http://blog.andremakram.com/?p=7
You do not have the required permissions to view the files attached to this post.
-
Nikolay
- Developer
- Posts: 1535
- Joined: Sat Dec 06, 2008 2:27 pm
- Are you a spam bot?: No
- Location: Sankt-Petersburg, Russia
Post
by Nikolay »
-
Nikolay
- Developer
- Posts: 1535
- Joined: Sat Dec 06, 2008 2:27 pm
- Are you a spam bot?: No
- Location: Sankt-Petersburg, Russia
Post
by Nikolay »
for Transaction Filter settings
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" />
<link href="master.css" rel="stylesheet"></link>
<title>Andre's JSON Table</title>
</head>
<body onload="loadingBody()">
<div id="mytable"></div>
</body>
<script>
function loadingBody(){
var json =[{"ACCOUNT": "События"}, {"DATE": "2014-07-11"}];
if(json.length > 0){
displayData(json);
}
}
function createTableRowContent(rowObject, data, cellType){
var rowContent = document.createElement(cellType);
var cell = document.createTextNode(data);
rowContent.appendChild(cell);
rowObject.appendChild(rowContent);
}
function createTableData(rowObject, data){
createTableRowContent(rowObject, data, 'td');
}
function displayData(jsonData){
var table = document.createElement('table');
table.border = "1";
var tbody = document.createElement('tbody');
table.appendChild(tbody);
for(var obj in jsonData){
var row = document.createElement('tr');
for(var prop in jsonData[obj]){
createTableData(row, prop);
createTableData(row, jsonData[obj][prop]);
}
tbody.appendChild(row);
}
document.getElementById('mytable').innerHTML = '';
document.getElementById('mytable').appendChild(table);
}
</script>
</html>
-
Nikolay
- Developer
- Posts: 1535
- Joined: Sat Dec 06, 2008 2:27 pm
- Are you a spam bot?: No
- Location: Sankt-Petersburg, Russia
Post
by Nikolay »
Universal template
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()">
<p>JSON string <div id="myjson"></div></p>
<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>