This file contains 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
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment