stlsmiths/gist:1057797

## gistfile1.js
<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>
	<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>