Highlighted

Vertical Table with dynamic data

Community Beginner ,
Jan 15, 2020

Copy link to clipboard

Copied

I have data structure like this in my MSSQL

+----+-------+--------+
| Id | Name  | Gender |
+----+-------+--------+
| 1  | Fahad  | Male    |
+----+-------+--------+
| 2  | Saad   | Male     |
+----+-------+--------+
| 3  | Asif    | Male     |
+----+-------+--------+

But I want to show it like this in my HTML table 

+--------+-------+------+------+ |
| Id         | 1        | 2       | 3      |
+--------+-------+------+------+ |
| Name   | Fahad | Saad | Asif |
+--------+-------+------+------+
| Gender | Male  | Male | Male |
+--------+-------+------+------+ |

I tried this code but it didn't work probably my data structure is not an array.I m new at coding.Thank you for your help
This is my code

<html>
<head>
   <title>Vertical Sorting</title>
</head>
<cfquery name = "qMyQuery" datasource = "dsn">   SELECT fields
   FROM   table
   ORDER BY myField</cfquery>
<body>
<!--- set the number of colums you wish to have --->
<cfset cols = 5>
<!--- get the number of rows so you know what record to display at the top of the next row. for example if our query contains "a,b,c,d,e,f,g,h,i,j,k,l,m" (13 elements) it will produce 3 totalrows--->
<cfset totalRows = ceiling(qMyQuery.RecordCount / cols)>
<!--- set inital record to 1 "output" is the actual cell of the query --->
<cfset output = 1>
<!--- Create table --->
<table width = "100%" border="0" align="center" cellpadding="2" cellspacing = "2">            
    <!--- loop through the rows.  This loop will run 3 times in this example --->
    <cfloop from = "1" to = "#totalRows#" index = "thisRow">
    <tr>
        <!--- this loop will run 5 times in times in this example --->
        <cfloop from = "1" to = "#cols#" index = "thisCol">
        <!--- the width in the table cell will dynamicaly calculated to evenly distribute the cells. in this example if cols = 5 100/5 will make the cells 20% of the table --->        <td width = "<cfoutput>#numberformat((100/cols), 99)#</cfoutput>%" align="center" nowrap style = "border: 1px solid #ccc;">
            <!--- Check current record with the record count, this will be used to display data or an empty cell --->
            <cfif output lte qMyQuery.recordCount>
                <cfoutput>#qMyQuery.Mon[output]#</cfoutput>
            <cfelse>
            <!--- use <br> to display an empty cell --->
                <br>
            </cfif>
            <!--- increment counter to the next record in this example if we started on the first cell of the first row it would be 1(a), then 4(d), then 7(g) and so on if this was the firs cell on the second row it would be 2(b), 5(e), 8(h), continue... --->
            <cfset output = output + totalRows>
        </td>
        </cfloop>
        <!--- this little bit tells where to start the next row. if we just finished the first row output would be 2(b) --->
        <cfset output = thisRow + 1>
    </tr>
    </cfloop>
</table>
</body>
</html>

 

TOPICS
Database access, Getting started

Views

162

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Vertical Table with dynamic data

Community Beginner ,
Jan 15, 2020

Copy link to clipboard

Copied

I have data structure like this in my MSSQL

+----+-------+--------+
| Id | Name  | Gender |
+----+-------+--------+
| 1  | Fahad  | Male    |
+----+-------+--------+
| 2  | Saad   | Male     |
+----+-------+--------+
| 3  | Asif    | Male     |
+----+-------+--------+

But I want to show it like this in my HTML table 

+--------+-------+------+------+ |
| Id         | 1        | 2       | 3      |
+--------+-------+------+------+ |
| Name   | Fahad | Saad | Asif |
+--------+-------+------+------+
| Gender | Male  | Male | Male |
+--------+-------+------+------+ |

I tried this code but it didn't work probably my data structure is not an array.I m new at coding.Thank you for your help
This is my code

<html>
<head>
   <title>Vertical Sorting</title>
</head>
<cfquery name = "qMyQuery" datasource = "dsn">   SELECT fields
   FROM   table
   ORDER BY myField</cfquery>
<body>
<!--- set the number of colums you wish to have --->
<cfset cols = 5>
<!--- get the number of rows so you know what record to display at the top of the next row. for example if our query contains "a,b,c,d,e,f,g,h,i,j,k,l,m" (13 elements) it will produce 3 totalrows--->
<cfset totalRows = ceiling(qMyQuery.RecordCount / cols)>
<!--- set inital record to 1 "output" is the actual cell of the query --->
<cfset output = 1>
<!--- Create table --->
<table width = "100%" border="0" align="center" cellpadding="2" cellspacing = "2">            
    <!--- loop through the rows.  This loop will run 3 times in this example --->
    <cfloop from = "1" to = "#totalRows#" index = "thisRow">
    <tr>
        <!--- this loop will run 5 times in times in this example --->
        <cfloop from = "1" to = "#cols#" index = "thisCol">
        <!--- the width in the table cell will dynamicaly calculated to evenly distribute the cells. in this example if cols = 5 100/5 will make the cells 20% of the table --->        <td width = "<cfoutput>#numberformat((100/cols), 99)#</cfoutput>%" align="center" nowrap style = "border: 1px solid #ccc;">
            <!--- Check current record with the record count, this will be used to display data or an empty cell --->
            <cfif output lte qMyQuery.recordCount>
                <cfoutput>#qMyQuery.Mon[output]#</cfoutput>
            <cfelse>
            <!--- use <br> to display an empty cell --->
                <br>
            </cfif>
            <!--- increment counter to the next record in this example if we started on the first cell of the first row it would be 1(a), then 4(d), then 7(g) and so on if this was the firs cell on the second row it would be 2(b), 5(e), 8(h), continue... --->
            <cfset output = output + totalRows>
        </td>
        </cfloop>
        <!--- this little bit tells where to start the next row. if we just finished the first row output would be 2(b) --->
        <cfset output = thisRow + 1>
    </tr>
    </cfloop>
</table>
</body>
</html>

 

TOPICS
Database access, Getting started

Views

163

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jan 15, 2020 0
charold LATEST
New Here ,
Jan 17, 2020

Copy link to clipboard

Copied

Have you checked out using DataTables? 

https://www.datatables.net/

I have been playing around with this a bit and it flips your horizontal table to vertical fairly nicely.

Christine

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jan 17, 2020 1