lsmith/gist:171313

## gistfile1.js
<!doctype html>
<html>
<head>
    <meta http - equiv = "content-type"content = "text/html; charset=utf-8">
    <title>Server - side Pagination and Sorting for Dynamic Data </title>
    <link rel="stylesheet" type="text/css " href="datatable2.css " />
    <script type="text / javascript " src="js / yahoo - dom - event.js "></script>
    <script type="text / javascript " src="js / connection - min.js "></script>
    <script type="text / javascript " src="js / dragdrop - min.js "></script>
    <script type="text / javascript " src="js / dom - min.js "></script>
    <script type="text / javascript " src="js / json - min.js "></script>
    <script type="text / javascript " src="js / element - min.js "></script>
    <script type="text / javascript " src="js / datasource - min.js "></script>
    <script type="text / javascript " src="js / datatable - min.js "></script>
    <script type="text / javascript " src="js / button - min.js "></script>
    <style type="text / css ">
    body {
        font-family:arial;
        font-size:11px;
        margin:5;
        padding:5;
    }

    #dynamicdata{
    }

    #dynamicdata img{
        margin:100px 300px;
    }
    .yui-skin-sam .yui-dt tbody td {border-bottom: 1px solid #fff;}
    .yui-skin-sam .yui-dt thead th {border-bottom: 1px solid #7f7f7f;}
    .yui-skin-sam .yui-dt tr.yui-dt-last td,.yui-skin-sam .yui-dt th,.yui-skin-sam .yui-dt td {border: none;}
    .yui-skin-sam tr.mark td.yui-dt0-col-Change,.yui-skin-sam tr.mark td.yui-dt0-col-ChangePercent{background-color: #DF0707;color: #fff;}
    .yui-skin-sam .yui-dt tr.m td.yui-dt-col-Change,.yui-skin-sam .yui-dt tr.m td.yui-dt-col-ChangePercent{background-color: #0B971E;color: #fff;}
    </style>
</head>
<body class="yui-skin-sam">

<div id="dynamicdata ">Notice:Unable to render Marketwatch. Please Make Sure Your Javascript Is Enabled</div>
<script type="text / javascript ">
YAHOO.util.Event.onDOMReady(function () {
    var Dom = YAHOO.util.Dom;
    YAHOO.example.DynamicData = function() {
        var myPriceCellFormatter = function(elCell, oRecord, oColumn, oData){
            var oldValue = elCell.innerHTML;
            var newValue = oRecord.getData('LastTradedPrice');
            if(oldValue){
                var parentTr = Dom.getAncestorByTagName(elCell, "tr ");
                if(oldValue == newValue){
                    Dom.addClass(parentTr, 'm');
                }
                else if(oldValue>newValue) {
                    Dom.addClass(parentTr, 'mark');
                }
                else{}
            }
            var val = newValue;
            elCell.innerHTML=val;
        }

        var myColumnDefs = [
            {key:"id ", label:"ID ", sortable:true, resizeable:true, hidden:true},
            {key:"stock ", label:"Stock ", sortable:true, resizeable:true},
            {key:"LastTradedPrice ", label:"Price ", sortable:true, resizeable:true, formatter:myPriceCellFormatter},
            {key:"Change ", label:"Change ", sortable:true, resizeable:true},
            {key:"Volume ", label:"Volume ", sortable:true, resizeable:true, formatter:YAHOO.widget.DataTable.formatNumber},
            {key:"ChangePercent ", label:" % Change ", sortable:true, resizeable:true},
            {key:"High ", label:"High ", sortable:true, resizeable:true,formatter:YAHOO.widget.DataTable.formatCurrency},
            {key:"Low ", label:"Low ", sortable:true, resizeable:true,formatter:YAHOO.widget.DataTable.formatCurrency},
            {key:"PrevClose ", label:"PreviousClose ", sortable:true, resizeable:true,formatter:YAHOO.widget.DataTable.formatCurrency}
        ];

        var y=1;

        var myDataSource = new YAHOO.util.DataSource("assets / json_proxy2.php ? ");
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        myDataSource.responseSchema = {
            resultsList: "records ",
            fields: [
                {key:"id ", parser:"number "},
                {key:"stock "},
                {key:"LastTradedPrice "},
                {key:"Volume "},
                {key:"Change "},
                {key:"ChangePercent "},
                {key:"High "},
                {key:"Low "},
                {key:"PrevClose "}
            ]};

        var myConfigs = {
            draggableColumns:true,
            initialRequest: "sort = stock & dir = asc ",
            dynamicData: true,
            currencyOptions:{
                prefix:'',
                decimalPlaces:2,
                decimalSeparator:".",
                thousandsSeparator:","
            },
            sortedBy : {key:"stock ", dir:YAHOO.widget.DataTable.CLASS_ASC}
        };

        var myDataTable = new YAHOO.widget.DataTable("dynamicdata ", myColumnDefs, myDataSource, myConfigs);
        myDataTable.on("columnSortEvent ",function(column) {
            myDataSource.clearAllIntervals();
            y=0;
            if (column.dir == "yui-dt-asc") {
                var x = "asc";
            } else {
                x = "desc";
            }

            myDataSource.setInterval(5000,"sort=" + column.column.key + "&dir=" + x, myCallback);
        });

        myDataTable.subscribe("rowMouseoverEvent ", myDataTable.onEventHighlightRow);
        myDataTable.subscribe("rowMouseoutEvent ", myDataTable.onEventUnhighlightRow);

        var myCallback = {
            success: myDataTable.onDataReturnReplaceRows,
            scope: myDataTable,
            failure: function() {
                YAHOO.log("Polling failure", "error");
            }
        };

        if (y!=0) {
            var how = myDataTable.getState();
            if(how.sortedBy.dir == "yui-dt-asc") {
                var x = "asc";
            } else {
                x = "desc";
            }

            myDataSource.setInterval(5000,"sort=" + how.sortedBy.key + "&dir=" + x, myCallback);
        }

        return {
            ds: myDataSource,
            dt: myDataTable
        };
    }();
});
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta http - equiv = "content-type"content = "text/html; charset=utf-8">
	<title>Server - side Pagination and Sorting for Dynamic Data </title>
	<link rel="stylesheet" type="text/css " href="datatable2.css " />
	<script type="text / javascript " src="js / yahoo - dom - event.js "></script>
	<script type="text / javascript " src="js / connection - min.js "></script>
	<script type="text / javascript " src="js / dragdrop - min.js "></script>
	<script type="text / javascript " src="js / dom - min.js "></script>
	<script type="text / javascript " src="js / json - min.js "></script>
	<script type="text / javascript " src="js / element - min.js "></script>
	<script type="text / javascript " src="js / datasource - min.js "></script>
	<script type="text / javascript " src="js / datatable - min.js "></script>
	<script type="text / javascript " src="js / button - min.js "></script>
	<style type="text / css ">
	body {
	font-family:arial;
	font-size:11px;
	margin:5;
	padding:5;
	}

	#dynamicdata{
	}

	#dynamicdata img{
	margin:100px 300px;
	}
	.yui-skin-sam .yui-dt tbody td {border-bottom: 1px solid #fff;}
	.yui-skin-sam .yui-dt thead th {border-bottom: 1px solid #7f7f7f;}
	.yui-skin-sam .yui-dt tr.yui-dt-last td,.yui-skin-sam .yui-dt th,.yui-skin-sam .yui-dt td {border: none;}
	.yui-skin-sam tr.mark td.yui-dt0-col-Change,.yui-skin-sam tr.mark td.yui-dt0-col-ChangePercent{background-color: #DF0707;color: #fff;}
	.yui-skin-sam .yui-dt tr.m td.yui-dt-col-Change,.yui-skin-sam .yui-dt tr.m td.yui-dt-col-ChangePercent{background-color: #0B971E;color: #fff;}
	</style>
	</head>
	<body class="yui-skin-sam">

	<div id="dynamicdata ">Notice:Unable to render Marketwatch. Please Make Sure Your Javascript Is Enabled</div>
	<script type="text / javascript ">
	YAHOO.util.Event.onDOMReady(function () {
	var Dom = YAHOO.util.Dom;
	YAHOO.example.DynamicData = function() {
	var myPriceCellFormatter = function(elCell, oRecord, oColumn, oData){
	var oldValue = elCell.innerHTML;
	var newValue = oRecord.getData('LastTradedPrice');
	if(oldValue){
	var parentTr = Dom.getAncestorByTagName(elCell, "tr ");
	if(oldValue == newValue){
	Dom.addClass(parentTr, 'm');
	}
	else if(oldValue>newValue) {
	Dom.addClass(parentTr, 'mark');
	}
	else{}
	}
	var val = newValue;
	elCell.innerHTML=val;
	}

	var myColumnDefs = [
	{key:"id ", label:"ID ", sortable:true, resizeable:true, hidden:true},
	{key:"stock ", label:"Stock ", sortable:true, resizeable:true},
	{key:"LastTradedPrice ", label:"Price ", sortable:true, resizeable:true, formatter:myPriceCellFormatter},
	{key:"Change ", label:"Change ", sortable:true, resizeable:true},
	{key:"Volume ", label:"Volume ", sortable:true, resizeable:true, formatter:YAHOO.widget.DataTable.formatNumber},
	{key:"ChangePercent ", label:" % Change ", sortable:true, resizeable:true},
	{key:"High ", label:"High ", sortable:true, resizeable:true,formatter:YAHOO.widget.DataTable.formatCurrency},
	{key:"Low ", label:"Low ", sortable:true, resizeable:true,formatter:YAHOO.widget.DataTable.formatCurrency},
	{key:"PrevClose ", label:"PreviousClose ", sortable:true, resizeable:true,formatter:YAHOO.widget.DataTable.formatCurrency}
	];

	var y=1;

	var myDataSource = new YAHOO.util.DataSource("assets / json_proxy2.php ? ");
	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
	myDataSource.responseSchema = {
	resultsList: "records ",
	fields: [
	{key:"id ", parser:"number "},
	{key:"stock "},
	{key:"LastTradedPrice "},
	{key:"Volume "},
	{key:"Change "},
	{key:"ChangePercent "},
	{key:"High "},
	{key:"Low "},
	{key:"PrevClose "}
	]};

	var myConfigs = {
	draggableColumns:true,
	initialRequest: "sort = stock & dir = asc ",
	dynamicData: true,
	currencyOptions:{
	prefix:'',
	decimalPlaces:2,
	decimalSeparator:".",
	thousandsSeparator:","
	},
	sortedBy : {key:"stock ", dir:YAHOO.widget.DataTable.CLASS_ASC}
	};

	var myDataTable = new YAHOO.widget.DataTable("dynamicdata ", myColumnDefs, myDataSource, myConfigs);
	myDataTable.on("columnSortEvent ",function(column) {
	myDataSource.clearAllIntervals();
	y=0;
	if (column.dir == "yui-dt-asc") {
	var x = "asc";
	} else {
	x = "desc";
	}

	myDataSource.setInterval(5000,"sort=" + column.column.key + "&dir=" + x, myCallback);
	});

	myDataTable.subscribe("rowMouseoverEvent ", myDataTable.onEventHighlightRow);
	myDataTable.subscribe("rowMouseoutEvent ", myDataTable.onEventUnhighlightRow);

	var myCallback = {
	success: myDataTable.onDataReturnReplaceRows,
	scope: myDataTable,
	failure: function() {
	YAHOO.log("Polling failure", "error");
	}
	};

	if (y!=0) {
	var how = myDataTable.getState();
	if(how.sortedBy.dir == "yui-dt-asc") {
	var x = "asc";
	} else {
	x = "desc";
	}

	myDataSource.setInterval(5000,"sort=" + how.sortedBy.key + "&dir=" + x, myCallback);
	}

	return {
	ds: myDataSource,
	dt: myDataTable
	};
	}();
	});
	</script>
	</body>
	</html>