YUI Library Home

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.

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:

JavaScript:

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.

Copyright © 2011 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings