Adobe Dreamweaver CC 2014 v.13 - Manual (Page 235)

(Optional) Specify how you want to sort the data by selecting the column you want to sort by from the Sort Column pop-up menu. Once
you’ve selected the column, you can specify whether to sort it in ascending or descending order.
(Optional) Select Filter Out Duplicate rows to exclude duplicate rows of data from the data set.
(Optional) Select Disable Data Caching if you always want to have access to the most recent data in the data set. If you want to
autorefresh data, select Autorefresh Data and specify a refresh time in milliseconds.
When you’re finished in the Set Data Options screen, click Done to create the data set right away, or click Next to go on to the Choose
Insert Options screen. If you click Done, the data set becomes available in the Bindings panel (Window > Bindings).
5. In the Choose Insert Options screen, do one of the following:
Select a layout for the new data set, and specify the appropriate setup options. For more information, see Choose a layout for the data
set.
Select Do Not Insert HTML. If you select this option, Dreamweaver creates the data set, but does not add any HTML to the page. The
data set becomes available from the Bindings panel (Window > Bindings), and you can manually drag pieces of data from the data set to
the page.
6. Click Done.
Dreamweaver creates the data set and, if you selected a layout option, displays the layout and data placeholders on your page. If you look
in Code view, you’ll see that Dreamweaver has added references in the header to the xpath.js file and the SpryData.js file. These files are
important Spry assets that work in conjunction with the page. Be sure not to remove this code from your page or the data set will not
function. When you upload your page to a server, you’ll also need to upload these files as dependent files.
Choose a layout for the data set
The Choose Insert Options screen lets you select different display options for how you want to display values from the data set on the page. You
can display data using a dynamic Spry Table, a master/detail layout, a stacked containers (single column) layout, or a stacked containers with
spotlight area (two-column) layout. A thumbnail depiction of what each layout looks like appears in the Choose Insert Options screen.
Dynamic Table layout
Select this option if you want to display your data in a dynamic Spry Table. Spry Tables allow for dynamic column sorting and other interactive
behaviors.
Once you’ve selected this option, click the Set Up button to open the Insert Table dialog box and follow these steps:
1. In the Columns panel, adjust the columns for your table by doing the following:
Select a column name and click the minus (-) sign to delete the column from the table. Click the plus (+) sign and select a column name
to add new columns to the table.
Select a column name and click the up or down arrows to move the column. Moving a column up moves it further left in the displayed
table; moving a column down moves it to the right.
2. To make a column sortable, select the column in the Columns panel and select Sort Column When Header Is Clicked. By default, all
columns are sortable.
If you want to make a column unsortable, select its column name in the Columns panel, and deselect Sort Column When Header Is Clicked.
3. If you have CSS styles associated with your page, either as an attached style sheet or as a set of individual styles in your HTML page, you
can apply a CSS class for one or more of the following options:
Odd Row Class Changes the appearance of the odd-numbered rows in the dynamic table according to the selected class style.
Even Row Class Changes the appearance of the even-numbered rows in the dynamic table according to the selected class style.
Hover Class Changes the appearance of a table row when you move the mouse over it according to the selected class style.
Select Class Changes the appearance of a table row when you click it according to the selected class style.
Note: The order of the odd, even, hover, and select classes in your style sheet is very important. The rules should be in the exact order
indicated above (odd, even, hover, select). If the hover rule appears below the select rule in the style sheet, the hover effect won’t appear
until the user mouses over a different row. If the hover and select rules appear above the even and odd rules in the style sheet, the even
and odd effects will not work at all. You can drag rules in the CSS panel to order them correctly, or you can manipulate the CSS code
directly.
4. If the table you are creating is going to become a dynamic Spry master table, select Update Detail Region When Row Is Clicked. For more
information, see About dynamic Spry master tables and updating detail regions.
5. Click OK to close the dialog box and then click Done in the Choose Insert Options screen.
If you’re in Design view you’ll see the table appear with a row of headers and a row of data references. The data references are highlighted
and enclosed in curly brackets ({}).
228