Example 1: Moons of Jupiter

Features of this example:

  • Results displayed in pages, sortable and filterable by the user.
  • Diffferent column types: image, numeric, string, date.
  • Numeric data formatting using the mask attribute.
  • Default sort direction is descending for the discovery date column.
  • Column styling (a CSS style provides the black background for the moon images).
  • Non-sortable columns due to missing column attribute.
  • Query caching using the cachedwithin attribute.
  • The default 'glacier' skin.
  • The rowNumbers flag adds the ordinal number of each record at left.
  • Locale-specific formatting for 'English (US)' (change this using the selector at bottom right).
Source code for this example 
<!--- 
Note that the database for this example must be set up as a datasource first. The Microsoft Access database is located in the examples folder. Place the datasource name in the request.dsn variable.

Microsoft Access is not recommended for web purposes, and is provided here for demonstration purposes only. Better performance will be achieved with enterprise databases.
--->

<cfimport prefix="esw" taglib="../customtags/eswsoftware/">

<esw:sortableplus
	link="http://en.wikipedia.org/wiki/##name##_%28moon%29"
	table="JupiterMoons"
	dbms="Microsoft Access"
	datasource="#request.dsn#"
	cachedwithin="#createTimeSpan(0,1,0,0)#"
	key="id"
	rows="10"
	rowNumbers	
	sortBy="id" 
	style="width : 600px"
>
		
	<esw:column
		caption=""
		type="image"
		imageSrc="/examples/moons/##id##.jpg"
		imageWidth="30"
		imageAlt="##name##"
		style="background-color : black; padding : 10px;"
	/>		
		
	<esw:column
		column="ID"
		type="numeric"
	/>
	
	<esw:column
		column="Name"
		type="string"
	/>

	<esw:column
		column="Diameter"
		caption="Diameter<br>(km)"
		type="numeric"
	/>
	
	<esw:column
		column="Density"
		caption="Density<br>(km/m<sup>3</sup>)"
		type="numeric"
		mask=",.0"
	/>		
		
	<esw:column
		column="Rotation"
		caption="Rotation<br>(days)"
		type="numeric"
		mask=",.000"
	/>	
	
	<esw:column
		column="Discovery"
		caption="Discovery date"
		type="date"
		sortDirection="desc"
	/>		
	
</esw:sortableplus>

To run the example, you will need to:-