Create-a-DataTable-instance-based-on-markup-that-already-exists-on-the-page-By-progressively-enhancing-markup-with-higher-orde

YUI Library JavaScript DHTML


            



    
Progressive Enhancement

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}










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

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.EnhanceFromMarkup = 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}
        ];
        var parseNumberFromCurrency = function(sString) {
            // Remove dollar sign and make it a float
            return parseFloat(sString.substring(1));
        };
        var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("accounts"));
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
        myDataSource.responseSchema = {
            fields: [{key:"due", parser:"date"},
                    {key:"account"},
                    {key:"quantity", parser:"number"},
                    {key:"amount", parser:parseNumberFromCurrency} // point to a custom parser
            ]
        };
        var myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, myDataSource,
                {caption:"Example: Progressively Enhanced Table from Markup",
                sortedBy:{key:"due",dir:"desc"}}
        );

        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});



yui_2.7.0b.zip( 4,431 k)