YUI Library Examples: DataTable Control: Progressive Enhancement

DataTable Control: 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.

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

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:"date"},
19	{key:"account"},
20	{key:"quantity", parser:"number"},
21	{key:"amount", parser:this.parseNumberFromCurrency} // point to a custom parser
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:"asc"}}
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:"date"},
                    {key:"account"},
                    {key:"quantity", parser:"number"},
                    {key:"amount", parser:this.parseNumberFromCurrency} // point to a custom parser
            ]
        };

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

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

YUI Library Examples: DataTable Control: Progressive Enhancement

Sample Code for this Example

Configuration for This Example

YUI Logger Output:

DataTable Control Examples:

More DataTable Control Resources: