DataSource supports using a table in markup as its source of truth.
Total Amount Due: (click the Extract button)
|Due Date||Account Number||Quantity||Amount Due|
In this example, a table rendered in the page's markup will be parsed into an array, and stored in
The markup looks like this:
The resulting data will look like this:
The first step is to create the DataSource instance, seeding it with the
<table> element, which we get via
YAHOO.util.Dom.get. Configure the
responseSchema to identify the mapping between columns and data key names (first column will be called "due").
We'll take advantage of the often-ignored second constructor parameter to configure the DataSource inline.
By default, DataSource will treat all table cell data as strings. We can add
parsers to the field declarations to identify how the data should be stored. DataSource comes with a few parsers out of the box, but you can add your own custom parser by supplying a function as the
parser in the field definition.
Another way to create a parser common across all DataSource instances is to add your parse function to the
YAHOO.util.DataSource.Parser object. The property name you use can then be referenced as a string in the field's
We'll do this for the Amount column, since DataSource doesn't have a parser that can handle currency figures.
The next and final step is to issue a
sendRequest, providing a simple success handler to assign the parsed response's
results array to our desired destination.
At this point the data is available in
Since the DataSource is only needed for this one operation, and only one method is being executed, we don't even need to store the instance in a variable. Just call
sendRequest on the result of the DataSource constructor.
Below is a full code listing for this example, including the code for the buttons, making use of the extracted data.