TABLE FILE CAR SUM DEALER_COST RETAIL_COST BY COUNTRY BY CAR ON TABLE SET BYDISPLAY ON ON TABLE HOLD AS HLD1 FORMAT HTMTABLE END -RUN TABLE FILE CAR SUM DEALER_COST BY COUNTRY ON TABLE SET BYDISPLAY ON ON TABLE HOLD AS HLD2 FORMAT HTMTABLE END -RUN -HTMLFORM BEGIN <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script> function createHeader(myTable){ var headerArray = []; var headerAlign = []; var header; -* Get the Columns titles and insert into array for(var i=0; i<myTable.rows.item(1).cells.length; i++) { headerArray[i] = myTable.rows.item(0).cells.item(i).innerText; headerAlign[i] = myTable.rows.item(0).cells.item(i).hasAttribute('align'); } header = myTable.createTHead(); tr = document.createElement('tr'); header.appendChild(tr); for(var i=0; i<headerArray.length; i++) { th = document.createElement('th'); th.innerHTML = headerArray[i]; if(headerAlign[i]){ th.className = 'text-right'; } tr.appendChild(th); } myTable.deleteRow(1); myTable.className = 'table table-bordered table-hover table-striped'; } $(document).ready(function () { var myTable = document.getElementsByTagName('table')[0]; for(var i=0; i<document.getElementsByTagName('table').length; i++) { myTable = document.getElementsByTagName('table')[i]; createHeader(myTable); } }); </script> </head> <body> <div class="container"> !IBI.FIL.HLD1; !IBI.FIL.HLD2; </div> </body> </html> -HTMLFORM END -EXITThis message has been edited. Last edited by: <Kathryn Henning>,
<table class="table"> <thead> <tr> <th>Firstname</th> <th>Lastname</th> <th>Email</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>john@example.com</td> </tr> </tbody> </table> -* WebFOCUS fex starts here TABLE FILE CAR SUM DEALER_COST RETAIL_COST BY COUNTRY BY CAR ON TABLE SET BYDISPLAY ON ON TABLE HOLD AS HLD1 FORMAT HTMTABLE END -RUN TABLE FILE CAR SUM DEALER_COST BY COUNTRY ON TABLE SET BYDISPLAY ON ON TABLE HOLD AS HLD2 FORMAT HTMTABLE END -RUN -HTMLFORM BEGIN <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script> function createHeader(myTable){ -* Create 2 arrays: -* headerArray contains the Column titles -* headerAlign is Boolean to indicate whether the column title are right aligned(numeric fields) var headerArray = []; var headerAlign = []; var header; -* Get the Columns titles fro the TABLE and insert into array headerArray also check the alignment of the column titles. If the column title has an attribute of align we know that the column it numeric. for(var i=0; i<myTable.rows.item(1).cells.length; i++) { headerArray[i] = myTable.rows.item(0).cells.item(i).innerText; headerAlign[i] = myTable.rows.item(0).cells.item(i).hasAttribute('align'); } -* Create a THEAD, TR tags and append them to the TABLE layout header = myTable.createTHead(); tr = document.createElement('tr'); header.appendChild(tr); -* Create the TH tags and attach them to the TABLE layout including the column title value which we get from the headerArray, we also check to see if we need to add the text-right Bootstrap class for numeric columns. for(var i=0; i<headerArray.length; i++) { th = document.createElement('th'); th.innerHTML = headerArray[i]; if(headerAlign[i]){ th.className = 'text-right'; } tr.appendChild(th); } -* Delete the original column title row from the table as we have created the new column title row in the correct HTML TABLE structure. myTable.deleteRow(1); -* Add the Bootstrap CLASSes to the TABLE myTable.className = 'table table-bordered table-hover table-striped'; } -* After the page has loaded the below function is triggered automatically which converts the tables $(document).ready(function () { -* Scan the entire HTML DOM looking for all tables tags and pass each one as an argument to the createHeader function to convert them into a the correct HMTML layout/apply Bootstrap classes for(var i=0; i<document.getElementsByTagName('table').length; i++) { var myTable = document.getElementsByTagName('table')[i]; -* Loop through all the TABLEs in the HTML and pass the tables to the createHeader function to do the magic. createHeader(myTable); } }); </script> </head> <body> <div class="container"> !IBI.FIL.HLD1; !IBI.FIL.HLD2; </div> </body> </html> -HTMLFORM END -EXIT
SET PAGE = NOLEAD TABLE FILE CAR SUM DEALER_COST RETAIL_COST BY COUNTRY BY CAR ON TABLE SET BYDISPLAY ON ON TABLE HOLD AS REPORT1 FORMAT HTMTABLE ON TABLE SET HTMLCSS ON ON TABLE SET STYLE * GRID=OFF, BORDER=LIGHT, FONT=ARIAL,$ ENDSTYLE END -RUN TABLE FILE CAR SUM DEALER_COST BY COUNTRY ON TABLE SET BYDISPLAY ON ON TABLE HOLD AS REPORT2 FORMAT HTMTABLE ON TABLE SET HTMLCSS ON ON TABLE SET STYLE * GRID=OFF, BORDER=LIGHT, FONT=ARIAL,$ ENDSTYLE END -RUN -HTMLFORM BEGIN !IBI.FIL.REPORT1;<BR>!IBI.FIL.REPORT2; -HTMLFORM END
In FOCUS Since 1983 ~ from FOCUS to WebFOCUS. Current: WebFOCUS Administrator at FIS Worldpay | 8204, 8206 |
quote:This looks very similar to what WebFOCUS display with the following code
-* Add the Bootstrap CLASSes to the TABLE myTable.className = 'table table-bordered table-hover table-striped';
SCRIPT5007: Unable to get value of the property 'innerText': object is null or undefined ExBootstrapReports.fex?IBIRS_action=run&IBIMR_random=51326, line 24 character 1
headerArray[i] = myTable.rows.item(0).cells.item(i).innerText;
quote:Please try and run the code in Chrome and see if you still get an error in your console
-DEFAULTH &Country = 1, &COUNTRY = '', &Ctry1 = '', &Ctry2 = '', &Ctry3 = '', &Ctry4 = '' SET HOLDLIST = PRINTONLY SET PAGE = NOLEAD SET HTMLCSS = ON TABLE FILE CAR BY COUNTRY WHERE COUNTRY NE 'FRANCE' WHERE RECORDLIMIT EQ 4 ON TABLE HOLD AS TEMPCTRY END -RUN -REPEAT :Loop FOR &Country FROM 1 TO 4; -READFILE TEMPCTRY -SET &Ctry&Country.EVAL = &COUNTRY.QUOTEDSTRING; TABLE FILE CAR SUM RCOST AS 'Retail Cost' DCOST AS 'Dealer Cost' BY CAR AS 'Manufacturer' BY MODEL AS 'Model' WHERE COUNTRY EQ &COUNTRY.QUOTEDSTRING ON TABLE HOLD AS REPORT&Country.EVAL FORMAT HTMTABLE -*HEADING "Details for <COUNTRY" ON TABLE SET STYLE * grid=off, $ ENDSTYLE END GRAPH FILE car SUM RCOST AS 'Retail Cost' DCOST AS 'Dealer Cost' BY CAR AS 'Manufacturer' WHERE COUNTRY EQ &COUNTRY.QUOTEDSTRING ON GRAPH HOLD AS CHART&Country.EVAL FORMAT JSCHART -*HEADING "Details for <COUNTRY" ON GRAPH SET VZERO OFF ON GRAPH SET HTMLENCODE ON ON GRAPH SET GRAPHDEFAULT OFF ON GRAPH SET HAXIS 560.0 ON GRAPH SET VAXIS 260.0 ON GRAPH SET GRMERGE ADVANCED ON GRAPH SET GRMULTIGRAPH 0 ON GRAPH SET GRLEGEND 0 ON GRAPH SET GRXAXIS 1 ON GRAPH SET LOOKGRAPH VLINE ON GRAPH SET STYLE * *GRAPH_SCRIPT setDepthRadius(0); setPlace(true); *END INCLUDE=IBFS:/EDA/EDASERVE/_EDAHOME/ETC/endeflt.sty,$ *GRAPH_SCRIPT setReportParsingErrors(false); setSelectionEnableMove(false); *END ENDSTYLE END -:Loop -RUN -HTMLFORM BEGIN <!DOCTYPE html> <html lang="en"> <head> <title>jQuery Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="/ibi_apps/ibi_html/javaassist/jquery/jquery_min.js" type="text/javascript"></script> <script src="/ibi_apps/jquery/js/jquery-ui.min.js" type="text/javascript"></script> <script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <link type="text/css" rel="stylesheet" href="/ibi_apps/jquery/css/jquery-ui.css" /> <style> .bscell {width: 570px; height: 300px;} .card {width: 570px; height: 300px; font-weight: 200; color: #fff;} .card .front{background-color: #66f; overflow: auto;} .card .back{overflow: auto;} .header {line-height: 55px; font-size:20pt; text-align: center; border-bottom: 1px solid; background-color: #00f; color: #fff;} .title {line-height: 25px; text-align: center; border-bottom: 1px solid; background-color: #00f;} </style> <script type="text/javascript"> $(document).ready (function() { $(".card").flip({ trigger : "click", speed: 700, -* reverse: true, axis: "y" }); }); </script> </head> <body style="overflow: auto;"> <div class="container"> <div class="row"> <div class="col-sm-6 bscell"> <div class="card" id="card1"> <div class="front"> <div class="title">Report for &Ctry1.EVAL</div> !IBI.FIL.REPORT1; </div> <div class="back"> <div class="title">Chart for &Ctry1.EVAL</div> !IBI.FIL.CHART1; </div> </div> </div> <div class="col-sm-6 bscell"> <div class="card" id="card2"> <div class="front"> <div class="title">Report for &Ctry2.EVAL</div> !IBI.FIL.REPORT2; </div> <div class="back"> <div class="title">Chart for &Ctry2.EVAL</div> !IBI.FIL.CHART2; </div> </div> </div> </div> <div class="row"> <div class="col-sm-6 bscell"> <div class="card" id="card3"> <div class="front"> <div class="title">Report for &Ctry3.EVAL</div> !IBI.FIL.REPORT3; </div> <div class="back"> <div class="title">Chart for &Ctry3.EVAL</div> !IBI.FIL.CHART3; </div> </div> </div> <div class="col-sm-6 bscell"> <div class="card" id="card4"> <div class="front"> <div class="title">Report for &Ctry4.EVAL</div> !IBI.FIL.REPORT4; </div> <div class="back"> <div class="title">Chart for &Ctry4.EVAL</div> !IBI.FIL.CHART4; </div> </div> </div> </div> </div> </body> </html> -HTMLFORM END
In FOCUS since 1986 | WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2 | ||
WebFOCUS App Studio 8.2.06 standalone on Windows 10 |
quote:I think I'd rather just use two lines of JavaScript to Hide one DIV and Show another in it's place
In FOCUS since 1986 | WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2 | ||
WebFOCUS App Studio 8.2.06 standalone on Windows 10 |
SET PAGE = OFF TABLE FILE CAR SUM DEALER_COST AS 'Dealer Cost' RETAIL_COST AS 'Retail Cost' BY COUNTRY AS 'Country' BY CAR AS 'Car' ON TABLE SET BYDISPLAY ON ON TABLE HOLD AS HLD1 FORMAT HTMTABLE ON TABLE SET STYLE * ENDSTYLE END -RUN -* TABLE FILE CAR SUM SALES/I9C AS 'Sales' BY COUNTRY AS 'Country' ON TABLE SET BYDISPLAY ON ON TABLE HOLD AS HLD2 FORMAT HTMTABLE END -RUN -* -HTMLFORM BEGIN <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $('table').each(function(){ $(this).prepend('<thead></thead>'); $(this).find('thead').append($(this).find("tr:eq(0)")); $(this).find('tr:first td').wrapInner('<div />').find('div').unwrap().wrap('<th/>'); $(this).addClass("table table-striped table-bordered table-hover table-condensed"); }); }); </script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-8"> <div class="panel panel-primary"> <div class="panel-heading">Cost Report</div> <div class="panel-body">!IBI.FIL.HLD1;</div> </div> </div> <div class="col-md-4"> <div class="panel panel-primary"> <div class="panel-heading">Sales Report</div> <div class="panel-body">!IBI.FIL.HLD2;</div> </div> </div> </div> </div> </body> </html> -HTMLFORM END -EXIT
SET PAGE = OFF TABLE FILE CAR SUM DEALER_COST AS 'Dealer Cost' RETAIL_COST AS 'Retail Cost' BY COUNTRY AS 'Country' BY CAR AS 'Car' -*ON TABLE SET BYDISPLAY ON ON TABLE HOLD AS HLD1 FORMAT HTMTABLE END -RUN TABLE FILE CAR SUM SALES/I9C AS 'Sales' BY COUNTRY AS 'Country' -*ON TABLE SET BYDISPLAY ON ON TABLE HOLD AS HLD2 FORMAT HTMTABLE END -RUN -HTMLFORM BEGIN <!DOCTYPE html> <html> <head> <style> body {font-family: Arial; font-size: 9pt;} table {border-spacing: 0px; border: 1px; width: 100%; } td {border: .1em solid #F0F0F0; margin: 0px; padding: 5px; spacing: 0px;} tr:hover {background-color: #f0f0f0} table tr:nth-child(odd) {color: #000; background: #F9F9F9} table tr:nth-child(even) {color: #000; background: #FFF} table tr:hover { background-color: #ffffbb; } table tr:first-child { border: .1em solid #ccc; background-color: #ccc; font-weight: bold;} .panel-primary {border-top-left-radius: 10px; border-top-right-radius: 10px; float: left; margin: 10px; border: 1px solid #337AB7; padding: 0px;} .panel-heading {border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: #337AB7; color: #fff; padding: 10px; font-weight: bold; font-size: 14px;} .panel-200 {width: 95%; min-width: 200px; max-width: 600px;} .panel-400 {width: 95%; min-width: 400px; max-width: 600px;} </style> </head> <body> <div class="panel-primary panel-400"> <div class="panel-heading">Cost Report</div> <div class="panel-body">!IBI.FIL.HLD1;</div> </div> <div class="panel-primary panel-200"> <div class="panel-heading">Sales Report</div> <div class="panel-body">!IBI.FIL.HLD2;</div> </div> </body> </html> -HTMLFORM END -EXITThis message has been edited. Last edited by: GavinL,
body {font-family: Arial; font-size: 9pt;} table {border-spacing: 0px; border: 1px; width: 100%; } td {border: .1em solid #F0F0F0; margin: 0px; padding: 5px; spacing: 0px;} tr:hover {background-color: #f0f0f0} table tr:nth-child(odd) {color: #000; background: #F9F9F9} table tr:nth-child(even) {color: #000; background: #FFF} table tr:hover { background-color: #ffffbb; } table tr:first-child { border: .1em solid #ccc; background-color: #ccc; font-weight: bold;} .panel-primary {border-top-left-radius: 10px; border-top-right-radius: 10px; float: left; margin: 10px; border: 1px solid #337AB7; padding: 0px;} .panel-heading {border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: #337AB7; color: #fff; padding: 10px; font-weight: bold; font-size: 14px;} .panel-200 {width: 95%; min-width: 200px; max-width: 600px;} .panel-400 {width: 95%; min-width: 400px; max-width: 600px;}
-DEFAULT &REPORTTITLE = 'WebFOCUS Report'; -DEFAULT &SITESTYLE = '/approot/common/table.css'; -HTMLFORM reporthead.html
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>!IBI.AMP.REPORTTITLE;</title> <link rel="stylesheet" type="text/css" href="!IBI.AMP.SITESTYLE;">
-SET &REPORTTITLE = 'Gavin's pretty tables'; -INCLUDE reporthead -HTMLFORM BEGIN </head> <body> <div class="panel-primary panel-400"> <div class="panel-heading">Cost Report</div> <div class="panel-body">!IBI.FIL.HLD1;</div> </div> <div class="panel-primary panel-200"> <div class="panel-heading">Sales Report</div> <div class="panel-body">!IBI.FIL.HLD2;</div> </div> </body> </html> -HTMLFORM END
quote:can you make the 2nd, 3rd, nth columns stack under their sort BY column if the window gets phone resolution small?
quote:Play and enjoy(?)
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js.
In FOCUS since 1986 | WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2 | ||
WebFOCUS App Studio 8.2.06 standalone on Windows 10 |