Output Table Data Horizontaly
Get the Code for this Tutorial
View a Working Example of This Code
Comment on this Tutorial
Introduction
This tutorial will show you how to create a grid of data in a table sorted horizontally, in as many columns as you specify.
The Query...
The query for this example is a simple SELECT
<cfquery name="get_names" datasource="#dsn#">
SELECT names
FROM cfml_example_data
ORDER BY names
</cfquery>
The Code...
We need a variable to tell how many columns we are going to make
<cfset cols = 4>
Now we can start to make the html table
<table>
And begin outputing the data to create the table grid.
<cfoutput query="get_names">
Here we must check if query.currentrow divided by columns equals 1, then we need a new row.
For example. We set cols to 4 in the cfset above. If we have 15 rows of data in the query, and query.currentrow is 9 then we get 9 mod 4 = 1 (simply, 9 / 4 = 2 with a remainder of 1. Mod is modulus, which is the remainder of a division). So if 9 mod 4 is 1, we know we need to start a new html row.
<cfif currentrow mod cols EQ 1>
<tr>
</cfif>
Now create the cells that hold the data...
<td>#names#</td>
As we are outputing the data, we always need to check if we need to close the current html row by throwing in a </tr> tag.
We will close the html row on two condition. First we will close the html row if query.currentrow mod cols is 0. If the output is currently on row 8 of the query, and we have cols set to 4, then we calculate 8 mod 4 (or 8 / 4 has a remainder of 0) and we know we need to close the html row by using the </tr> tag.
<cfif currentrow mod cols EQ 0>
</tr>
The second condition that would tell us we need to finish up the html row is that if query.currentrow EQ the query.recordcount. The bit 'AND recordcount GT cols' is not needed, but prevents the filling in of extra blank cells if their is not enough records to fill on complete html row. Type a large number in the working example to see what mean. There is no reason to fill in empty cells to make valid html if there is only on row of data.
Inside this if we run a loop to fill up the final row with empty cells. This is simply to make valid html.
<cfelseif currentrow EQ recordcount AND recordcount GT cols>
<cfloop from="1" to="#cols - (recordcount mod cols)#" index="i">
<td> </td>
</cfloop>
</tr>
</cfif>
Close the cfoutput tag
</cfoutput>
and close the table tag.
</table>
Conclusion
A very simple, easy to use bit of script. I have seen other examples of similar functionality in much more unnecessarily complex code.
See the other tutorials for sorting the data vertically, and for outputing nested data in this manner.
____________
Tutorial Code
Download the Database<!--------------------------------------------
Kevin Sargent
November 12th 2005
http://www.lot-o-nothin.com/cfml/
Please Give Credit Where Used.
--------------------------------------------->
<!--- set the number of columns we want --->
<cfset cols = 4>
<!--- the query, simle, eh? --->
<cfquery name="get_names" datasource="#dsn#">
SELECT names
FROM cfml_example_data
ORDER BY names
</cfquery>
<!--- make the html table --->
<table width="300" cellpadding="3" cellspacing="1" class="table">
<!--- start outputing the data --->
<cfoutput query="get_names">
<!--- if we need a new row, make it here --->
<cfif currentrow mod cols EQ 1>
<tr>
</cfif>
<!--- This is the cell with the database output inside of it. --->
<td>#names#</td>
<!--- finish up the row --->
<cfif currentrow mod cols EQ 0>
</tr>
<!--- see if we need to fill in empty cells to make the html valid. --->
<cfelseif currentrow EQ recordcount AND recordcount GT cols>
<!--- cols -(recordcount mod cols) gives us the number of cells we need to loop to fill in the blanks --->
<cfloop from="1" to="#cols - (recordcount mod cols)#" index="i">
<td> </td>
</cfloop>
</tr>
</cfif>
</cfoutput>
<!--- finish the table --->
</table>
