CF_SortTable

Sortable Table Custom Tag

Create your query:

In this example we are going to keep the default sorting, based on primary key 'id'

<cfquery name="qryFurniture" datasource="inventory">
SELECT id,Room,Name,pdate
FROM pieces
</cfquery>

Call the custom Tag:

Now we call the custom tag, providing the query, whether we want it sortable or not, table width, table alignment, header Row Color, even and odd row colors maximum number of rows per page, which page to start on and finally the Column Headers and associated columns to display.

Optionally, I have provided a URL, key column and keyID paramater for linking each row to a detail page. In this example, the clicable rows will link to this same page.

<cf_sortTable rs="#qryFurniture#" sort="true" width="75%" align="center"
headerbgcolor="9999cc"
evenColor="cccccc"
oddColor="ffffff"
maxRows="25"
startRow="1"
columnHeaders="Piece,Location,Date of Purchase"
columnnames="name,room,pdate"
href="/Projects/coldfusion/cf_tagstore/sortTable/index.cfm"
keyID="userID"
keyColumn="id" />

Some key items to note:

  • The columnHeaders attribute provides the text to use in the first row of the table... (be sure these are in the same order as the columnNames, see below)
  • The columnnames attributes provides the specific coulmns from the original query to use for the table columns... (be sure these are in the same order as the columnHeaders, see above)
  • If you want to hyperlink the row, use the href, keyID and keyColumn attributes.

Live Example
Piece Location Date of Purchase
Couch Living Room Jan 1, 2007
Table Living Room Nov 21, 2006
Plasma TV Master Bed Room Jan 15, 2007
Recliner Living Room Dec 1, 2006

Home | About | Contact | Customers | Services

Copyright © 2004, C.P. Web Designs