So, today I needed to create a table of categories for a podcast application.  The problem was that I wanted a table that listed in the categories in columns, not just a simple incremental rows table.  Another words instead of this (I have added the record # in parenthesis next to each category to show you want I mean):

Admissions (1) Alumni (2) Career Center (3)
Events (4) Faculty Experts (5) Lectures (6)
News (7) Performing Arts (8) Prospective Students (9)
Student Life (10) Sports(11)

    I wanted this:

Admissions (1) Faculty Experts (5) Prospective Students (9)
Alumni (2) Lectures (6) Student Life (10)
Career Center (3) News (7) Sports (11)
Events (4) Performing Arts (8)

    I have never tired to do this before, so unfortunately I didn’t have any existing code laying around that I could work off of, so I decided to tackle this problem myself.  After thinking about the problem for a while, I decided to setup some basic variables that I would need:

?View Code COLDFUSION
1
2
3
4
5
6
7
8

var cols = 3;
var featuredcats = getAllFeaturedCategories();
var step = ceiling(featuredcats.recordcount / cols);
var i = 1;
var k = 1;
var row = '';
var currentCategory = '';
var catpodcasts = '';

    The cols variables will determine the number of columns in my table.  The function getAllFeaturedCategories() returns a query of categories that I will loop through to create the table.  The step variable is the number of rows for the table, using the ceiling function to ensure it is an integer.  I setup my indexing variables for my loops (I var them out since this is in a function).  The row variable will be used to get a particular record in the query, so that I can output category 1, then 5, then 9, etc… instead of category 1, then 2, then 3, etc…
    Now, let’s dive into the code that makes it all happen:

?View Code COLDFUSION
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<cfoutput>
    <table width="100%" cellspacing="1" cellpadding="1" border="0">
        <tbody>
            <cfloop from="1" to="#step#" index="i">
                <cfloop from="1" to="#cols#" index="k">
                    <cfif k neq 1>
                        <cfset row = step*(k-1)+i>
                    <cfelse>
                        <cfset row = i>
                        <tr>
                    </cfif>
                    <cfif row lte featuredcats.recordcount>
                        <cfset currentCategory = this.podcastscategory.init(featuredcats.category_id[row])>
                        <td><a href="javascript:void(0)" onclick="new Effect.ScrollTo('#featuredcats.id[row]#');">#currentCategory.get('category')#</a></td>
                    </cfif>
                    <cfif k eq cols>
                        </tr>
                    </cfif>
                </cfloop>
            </cfloop>
        </tbody>
    </table>
</cfoutput>

    Basically, I am looping through the rows and columns of my table, and setting the row variable to the desired number of the record I want to output.  The currentCategory object is a component that encapsulates my database calls, and allows me to get and set variables into my database.  As a side note, the goto variable is so that I only output the top 3 podcasts for each category, and then provide a more link if there are more than 3 podcasts in that category.
    I found this a pretty interesting problem and unique challenge instead of the usual table output of a query.

This entry was posted on Friday, March 30th, 2007 at 3:35 pm.
Categories: Uncategorized.

No Comments, Comment or Ping

Reply to “Column based table output with CF”