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.

View example in new window.

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

Sample Code for this Example

Data:

CSS:

Markup:

<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:

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.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"}});
        };

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

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: