HTMLDataSet using External Table as Data Source

This page demonstrates how to use a HTMLDataSet to load the data from a table located in an external file, products.html

The use HTMLDataSet is similar to that of a XMLDataSet. The data can be loaded from a HTML Element (such as a <table>) located in the same file or in a different file under the same domain.
Optional parameters used with XMLDataSet to specify sorting, caching, distinct, loadInterval work the same way with the HTMLDataSet.

1. Load an external table

In this sample the HTMLDataSet is loading its data from the table with the ID "productsTable" located in products.html file.
Here's the instantiation code for the Data Set:

	var ds1 = new Spry.Data.HTMLDataSet("products.html", "productsTable");

By default, the cells from the first row are used as headers. However, this can be changed by specifying 'firstRowAsHeaders:false' in the constructor's optional parameters. See the second sample.
Also, an optional array with column names can be passed in order to specify your own column names to be used. See the third sample.

Note: The values in the first row of data that are used as headers should not contain spaces or other tags. The tags are removed and the spaces are replaced with underscore (_).
E.g.: The values under the header <strong>product features</strong> will be accessed inside a spry:region with this markup: {product_features}

2. Load an external table and don't use the first row of data as column names

In this sample the HTMLDataSet is loading its data from the same external table, but uses all the rows as data. This is specified with the additional 'firstRowAsHeaders:false' parameter:

	var ds2 = new Spry.Data.HTMLDataSet("products.html", "productsTable", {firstRowAsHeaders:false});

These values can be accessed using this markup {column#}: {column0} for the first column of data in the source table, {column1} for the second...
Notice that the first row of the source table table is now used as data:

3. Load an external table and use a custom array of column names

There might be situations where you want to use your own column names to access the data. Just use the optional 'columnNames' parameter.
In this sample the HTMLDataSet is similar to the one in the second sample, it uses all the rows as data. However, the columNames are taken from the array in the constructor, so you have to use these values to access the data.

	var ds3 = new Spry.Data.HTMLDataSet("products.html", "productsTable", {firstRowAsHeaders:false, columnNames:["Product", , "ShortD", , ,]});

The values can be accessed using this markup: {Product}, {ShortD}, etc.

Note: Don't use spaces for column names in your array. Use the same number of elements in the columnNames array as the actual number of columns. Use ,, to mark the missing (not used) columns.
Also, if you are not setting 'firstRowAsHeader:false', the first row of data will be removed from the data set and you'll use your custom column names.