Created
July 1, 2011 03:08
-
-
Save stlsmiths/1057797 to your computer and use it in GitHub Desktop.
YUI2 DataTable populated via Ajax call storing as local JSARRAY
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>YUI DataTable Exercises</title> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8"> | |
| <script src="http://yui.yahooapis.com/2.9.0/build/yuiloader/yuiloader-min.js"></script> | |
| <style type="text/css"> | |
| div.info { | |
| background:#ffc; | |
| padding: 4 4 4 4; | |
| -moz-border-radius:6px; | |
| border-radius: 6px; | |
| } | |
| div.loading { | |
| background: #eee url(ajax-loader.gif) 50% 50% no-repeat; | |
| width:25%; | |
| padding: 10px; | |
| } | |
| div.example { | |
| margin-top: 50px; | |
| margin-right:100px; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| /* | |
| * This example receives remote JSON data via Connection Mgr (like wordpress or jquery Ajax document), | |
| * then creates a DT converting JSON with LocalDS. | |
| * | |
| * Server: /pub/yui_dt_srv.php | |
| * Raw Data : iopt=data_somemusic | |
| * Data : JSON object | |
| * | |
| * DataSource: LocalDataSource (TYPE_JSON) | |
| * | |
| * DataTable: ScrollingDataTable | |
| * | |
| * Published: Yes | |
| */ | |
| var loader = new YAHOO.util.YUILoader({ | |
| require: [ 'yuiloader-dom-event', 'reset-fonts-grids', 'base', "datatable", "datasource", "connection", "json" ], | |
| allowRollup : true, | |
| loadOptional: true, | |
| // The function to call when all script/css resources have been loaded | |
| onSuccess: function() { | |
| // | |
| // Aliases for YUI placeholders | |
| // | |
| var YDom = YAHOO.util.Dom, | |
| YUtil = YAHOO.util, | |
| YLang = YAHOO.lang, | |
| YEvent = YAHOO.util.Event; | |
| YAHOO.util.Event.onDOMReady( function() { | |
| // create a sandbox ... | |
| (function(){ | |
| // | |
| // Setup my server URL and the POST variable ... | |
| // | |
| var sURL = '../yui_dt_srv.php'; | |
| var sPost = 'iopt=data_somemusic'; | |
| // | |
| // Fire off an AJAX request to get all the data as a JSON string (object?) | |
| // | |
| YUtil.Connect.asyncRequest( 'post', sURL, { | |
| success: function(o) { | |
| // | |
| // Response from AJAX is in o.responseText, | |
| // parse the JSON to a JS object | |
| // | |
| var jsobj = YAHOO.lang.JSON.parse(o.responseText); | |
| // | |
| // Pass the JS array data (as "Results" member of jsobj) to | |
| // make the DataTable ... | |
| // | |
| makeMyDT( jsobj.Results ); | |
| // makeMyDT( o.responseText ); | |
| }, | |
| failure: function(o) { | |
| alert("error from server : " + o.responseText); | |
| } | |
| }, sPost ); | |
| function makeMyDT( js_data ) { | |
| // | |
| // Setup the DataSource for Remote JSARRAY | |
| // | |
| /* Un=comment this to pass in data as full JSON object, | |
| var myDS = new YUtil.LocalDataSource( js_data ); // LocalDS assumes local data | |
| myDS.responseType = YUtil.DataSource.TYPE_JSON; | |
| myDS.responseSchema = { | |
| resultsList : 'Results', | |
| fields: [ 'ma_id', 'ma_artist', 'ma_album', {key:'ma_year', parser: 'number'}, 'ma_label' ], | |
| metaFields : { | |
| reply_code : "replyCode", | |
| reply_text : "replyText", | |
| num_recs : "numRecords" | |
| } | |
| }; | |
| and comment out the DS below ... | |
| */ | |
| var myDS = new YUtil.DataSource( js_data ); | |
| myDS.responseType = YUtil.DataSource.TYPE_JSARRAY; | |
| myDS.responseSchema = { | |
| fields: [ 'ma_id', 'ma_artist', 'ma_album', {key:'ma_year', parser: 'number'}, 'ma_label' ] | |
| }; | |
| // | |
| // Define the DT columns | |
| // | |
| var myCols = [ | |
| { key: "ma_artist", label: 'Artist', width:140, sortable:true }, | |
| { key: "ma_album", label: "Album Title", sortable: true, resizable:true }, | |
| { key: 'ma_year', label: 'Release Year', formatter:'number', sortable: true, className:'align-center' }, | |
| { key: "ma_label", label: "Release Label", sortable: true, width:180, resizeable:true } | |
| ]; | |
| // | |
| // Create the DataTable | |
| // | |
| var myConfigs = { | |
| // initialRequest : 'iopt=data_somemusic', // this is POSTed to the server ... | |
| numberOptions : { decimalPlaces: 0 }, | |
| height: "30em", | |
| MSG_LOADING: "Loading music data ...", | |
| MSG_EMPTY: "No music data found!" | |
| }; | |
| var myDT = new YAHOO.widget.ScrollingDataTable( 'divTable', myCols, myDS, myConfigs ); | |
| myDT.subscribe("cellClickEvent", function(oArgs){ | |
| var tar = YEvent.getTarget(oArgs), | |
| rec = this.getRecord(tar); | |
| this.unselectAllRows(); | |
| this.selectRow(rec); | |
| }); | |
| } | |
| })(); // end sandbox anonymous function | |
| }); // end onDOMREady | |
| }, | |
| timeout: 5000, | |
| combine: true | |
| }); | |
| loader.insert(); | |
| </script> | |
| </head> | |
| <body class=" yui-skin-sam"> | |
| <div align="left"> | |
| <h2>DataTable with Remote JSON data</h2> | |
| <p> | |
| A DataTable which is derived from remote data (from a PHP / MySQL call) is demonstrated. | |
| <p>This example data is a sampling of some Music by various artists, just for fun. (The "Album" and "Label" columns are resizeable, all are sortable) | |
| <div id="divTable"></div> | |
| </p> | |
| <p></p> | |
| <div class="example"> | |
| You can always see the entire source code for this example by using your browser's "show page source code" capability, | |
| <br/>usually Right-Click in the browser main page. | |
| <p></p> | |
| <p>Any comments or helpful recommendations can be posted on the <a href='http://yuilibrary.com/forum/viewforum.php?f=90' target='_blank'>YUILibrary - YUI 2 forum</a> where I sometimes | |
| visit under the username <a href='http://yuilibrary.com/forum/memberlist.php?mode=viewprofile&u=5872' target='_blank'>stlsmiths</a>. Thanks!</p> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment