YUI Library Examples: DataTable Control (beta): Progressive Enhancement

DataTable Control (beta): Progressive Enhancement

This example creates a DataTable instance based on markup that already exists on the page. By progressively enhancing markup with higher order functionality, users who do not have JavaScript enabled are still able to view the page's content and experience core functionality.

In this example's code, note that we listen for the window "load" event before calling our function to be sure that the original table markup is fully rendered and available as a DataSource source for our DataTable instance.

View example in new window.

Due Date	Account Number	Quantity	Amount Due

Example: Progressively Enhanced Table from Markup
Due Date	Account Number	Quantity	Amount Due
1/23/1999	29e8548592d8c82	12	$150.00
5/19/1999	83849	8	$60.00
8/9/1999	11348	1	$34.99
1/23/2000	29e8548592d8c82	10	$1.00
4/28/2000	37892857482836437378273	123	$33.32
1/23/2001	83849	5	$15.00
9/30/2001	224747	14	$56.78
Loading data...

Sample Code for this Example

Data:


1	/* Data is derived from the HTML TABLE element. */
	view plain \| print \| ?

CSS:


1	/* No custom CSS. */
	view plain \| print \| ?

Markup:


1	<div id="markup">
2	<table id="accounts">
3	<thead>
4	<tr>
5	<th>Due Date</th>
6	<th>Account Number</th>
7	<th>Quantity</th>
8	<th>Amount Due</th>
9	</tr>
10	</thead>
11	<tbody>
12	<tr>
13	<td>1/23/1999</td>
14	<td>29e8548592d8c82</td>
15	<td>12</td>
16	<td>$150.00</td>
17	</tr>
18	<tr>
19	<td>5/19/1999</td>
20	<td>83849</td>
21	<td>8</td>
22	<td>$60.00</td>
23	</tr>
24	<tr>
25	<td>8/9/1999</td>
26	<td>11348</td>
27	<td>1</td>
28	<td>$34.99</td>
29	</tr>
30	<tr>
31	<td>1/23/2000</td>
32	<td>29e8548592d8c82</td>
33	<td>10</td>
34	<td>$1.00</td>
35	</tr>
36	<tr>
37	<td>4/28/2000</td>
38	<td>37892857482836437378273</td>
39	<td>123</td>
40	<td>$33.32</td>
41	</tr>
42	<tr>
43	<td>1/23/2001</td>
44	<td>83849</td>
45	<td>5</td>
46	<td>$15.00</td>
47	</tr>
48	<tr>
49	<td>9/30/2001</td>
50	<td>224747</td>
51	<td>14</td>
52	<td>$56.78</td>
53	</tr>
54	</tbody>
55	</table>
56	</div>
	view plain \| print \| ?

<div id="markup">
    <table id="accounts">
        <thead>
            <tr>
                <th>Due Date</th>
                <th>Account Number</th>
                <th>Quantity</th>
                <th>Amount Due</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1/23/1999</td>
                <td>29e8548592d8c82</td>
                <td>12</td>
                <td>$150.00</td>
            </tr>
            <tr>
                <td>5/19/1999</td>
                <td>83849</td>
                <td>8</td>
                <td>$60.00</td>
            </tr>
            <tr>
                <td>8/9/1999</td>
                <td>11348</td>
                <td>1</td>
                <td>$34.99</td>
            </tr>
            <tr>
                <td>1/23/2000</td>
                <td>29e8548592d8c82</td>
                <td>10</td>
                <td>$1.00</td>
            </tr>
            <tr>
                <td>4/28/2000</td>
                <td>37892857482836437378273</td>
                <td>123</td>
                <td>$33.32</td>
            </tr>
            <tr>
                <td>1/23/2001</td>
                <td>83849</td>
                <td>5</td>
                <td>$15.00</td>
            </tr>
            <tr>
                <td>9/30/2001</td>
                <td>224747</td>
                <td>14</td>
                <td>$56.78</td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript:


1	YAHOO.util.Event.addListener(window, "load", function() {
2	YAHOO.example.EnhanceFromMarkup = new function() {
3	var myColumnDefs = [
4	{key:"due",label:"Due Date",formatter:YAHOO.widget.DataTable.formatDate,sortable:true},
5	{key:"account",label:"Account Number", sortable:true},
6	{key:"quantity",label:"Quantity",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true},
7	{key:"amount",label:"Amount Due",formatter:YAHOO.widget.DataTable.formatCurrency,sortable:true}
8	];
9
10	this.parseNumberFromCurrency = function(sString) {
11	// Remove dollar sign and make it a float
12	return parseFloat(sString.substring(1));
13	};
14
15	this.myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("accounts"));
16	this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
17	this.myDataSource.responseSchema = {
18	fields: [{key:"due", parser:YAHOO.util.DataSource.parseDate},
19	{key:"account"},
20	{key:"quantity", parser:YAHOO.util.DataSource.parseNumber},
21	{key:"amount", parser:this.parseNumberFromCurrency}
22	]
23	};
24
25	this.myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, this.myDataSource,
26	{caption:"Example: Progressively Enhanced Table from Markup",
27	sortedBy:{key:"due",dir:"desc"}}
28	);
29	};
30	});
	view plain \| print \| ?

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.EnhanceFromMarkup = new function() {
        var myColumnDefs = [
            {key:"due",label:"Due Date",formatter:YAHOO.widget.DataTable.formatDate,sortable:true},
            {key:"account",label:"Account Number", sortable:true},
            {key:"quantity",label:"Quantity",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true},
            {key:"amount",label:"Amount Due",formatter:YAHOO.widget.DataTable.formatCurrency,sortable:true}
        ];

this.parseNumberFromCurrency = function(sString) {
            // Remove dollar sign and make it a float
            return parseFloat(sString.substring(1));
        };

this.myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("accounts"));
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
        this.myDataSource.responseSchema = {
            fields: [{key:"due", parser:YAHOO.util.DataSource.parseDate},
                    {key:"account"},
                    {key:"quantity", parser:YAHOO.util.DataSource.parseNumber},
                    {key:"amount", parser:this.parseNumberFromCurrency}
            ]
        };

this.myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, this.myDataSource,
                {caption:"Example: Progressively Enhanced Table from Markup",
                sortedBy:{key:"due",dir:"desc"}}
        );
    };
});

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: DataTable Control (beta): Progressive Enhancement

Sample Code for this Example

YUI Logger Output:

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: