HTMLDataSet using Internal Nested Structure as Data Source

This page demonstrates how to use a HTMLDataSet to load the data from a Div container located in this file.

The use HTMLDataSet is similar to that of a XMLDataSet. The data can be loaded from a HTML element 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 in a similar way with the HTMLDataSet.

In this sample the HTMLDataSet is loading its data from a DIV container with a nested structure like this:

• Source Container DIV
  • Row DIV class="rowData"
    • SPAN Item

When using a HTML structure other then a TABLE, the HTMLDataSet needs some extra information in order to extract data from such three-level nested structure. There are two optional parameters that can be used to accomplish this:

• rowSelector - instructs the data set on what elements inside the current DIV container are considered row blocks. Equivalent to defining the <TR> tag.
• dataSelector - tell the data set what elements are data items inside each row identified by rowSelector. Equal to a <TD> in a table data set.

Values that can be used for rowSelector or dataSelector:

• tag name: "DIV", "SPAN", "*"
• class name: ".rowData", ".even"
• id: "#product1"
• tag name with class name: "DIV.rowData", "*.header"
• tag name with id: "DIV#product1"
• child selector (first-level descendents): ">"
• child selector combined with any of the above: "> DIV.rowData"
• comma delimited list of selectors (the node will be selected if it matches at least one from the list): "#product1, #product2, #product3"

DIVs are used in this sample because they are flexible and can contain other block level elements. Remember that, for instance, you cannot put other block level elements within a <p> tag.

You cannot use firstRowAsHeaders parameter with any other structure than Table.
In order to get the data using other markup then the default one ({column0}, {column1}) you can pass in an array of columNames:["Product", "Description"]. Don't use spaces inside the column names.

Here's the HTMLDataSet constructor:

	var ds1 = new Spry.Data.HTMLDataSet(null, "sourceContainer", {rowSelector:"div.rowData", dataSelector:"span", columnNames:["Product", "Description"]});

Here's what the Source Container DIV looks like:

<div id="sourceContainer"> 
	<div class="rowData" id="product1">
		<span class="header">Adobe Photoshop CS2</span>
		<span class="description">The professional standard in desktop digital imaging</span>
	</div>
	<div class="rowData" id="product2">
		<span class="header">Adobe Illustrator CS2</span>
		<span>Adobe&reg; Illustrator&reg; CS2 software gives you new creative freedom 
		that lets you realize your ideas quickly and powerfully. 
		Instantly convert bitmaps to vector artwork and paint more intuitively. 
		Save time with intelligent palettes and optimized workspaces. 
		Plus, tight integration with other software allows you to produce extraordinary graphics for print, 
		video, the web, and mobile devices.</span>
	</div>
	<div class="rowData" id="product3">
		<span class="header">Adobe InDesign CS2</span>
		<span class="description">A new standard in professional layout and design</span>
	</div>
	<div class="rowData" id="product4">
		<span class="header">Adobe GoLive CS2</span>
		<span class="description">Professional, standards-based Web and mobile authoring</span>
	</div>
	<div class="rowData" id="product5">
		<span class="header">Adobe Dreamweaver 8</span>
		<span class="description">Dreamweaver 8 is the industry-leading web development tool, 
		enabling users to efficiently design, develop and maintain standards-based websites and applications.</span>
	</div>
	<div class="rowData" id="product6">
		<span class="header">Adobe Flash 8 Professional</span>
		<span class="description">Introducing Macromedia's biggest Flash release to date.</span>
	</div>
	<div class="rowData" id="product7">
		<span class="header">Adobe Fireworks 8</span>
		<span class="description">Fireworks 8 lets you balance maximum image quality with minimum compression size as you create, 
		edit and optimize images for the web with precise control.</span>
	</div>
</div>