Advertisement
Guest User

YUI 3.3 DataTable + DataSource + Scroll Error

a guest
Mar 19th, 2011
559
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6. <title>DataTable + DataSource + Scroll</title>
  7.  
  8. <style type="text/css">
  9. /*margin and padding on body element
  10.   can introduce errors in determining
  11.   element position and are not recommended;
  12.   we turn them off as a foundation for YUI
  13.   CSS treatments. */
  14. body {
  15.     margin:0;
  16.     padding:0;
  17. }
  18. </style>
  19.  
  20. <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
  21. <script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
  22.  
  23.  
  24. <!--begin custom header content for this example-->
  25. <style type="text/css">
  26. /* custom styles for this example */
  27. .dt-example {margin:1em;}
  28.  
  29. /* css to counter global site css */
  30. .dt-example th {text-transform:none;}
  31. .dt-example table {width:auto;}
  32. .dt-example caption {display:table-caption;}
  33. </style>
  34. <!--end custom header content for this example-->
  35.  
  36. </head>
  37.  
  38. <body class="yui3-skin-sam  yui-skin-sam">
  39.  
  40. <h1>DataTable + DataSource + Scroll</h1>
  41.  
  42. <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
  43.  
  44. <div id="pizza" class="dt-example"></div>
  45.  
  46. <script type="text/javascript">
  47. YUI({
  48.     filter: 'raw'
  49. }).use("datasource", "datatable", function (Y) {
  50.     var myData = {
  51.         "dummy": [
  52.             { "field1": 1, "field2": "y" },
  53.             { "field1": 2, "field2": "n" },
  54.             { "field1": 3, "field2": "n" },
  55.             { "field1": 4, "field2": "n" },
  56.             { "field1": 5, "field2": "n" },
  57.             { "field1": 6, "field2": "n" },
  58.             { "field1": 7, "field2": "n" },
  59.             { "field1": 8, "field2": "n" },
  60.             { "field1": 9, "field2": "n" },
  61.             { "field1": 10, "field2": "y" }
  62.         ]
  63.     },
  64.     cols = [
  65.         {key: "field1", label: "FIELD1", sortable: true},
  66.         {key: "field2", label: "FIELD2", sortable: true}
  67.     ],
  68.     ds, dt;
  69.        
  70.     ds = new Y.DataSource.Local({source: myData});
  71.  
  72.     ds.plug(Y.Plugin.DataSourceJSONSchema, {
  73.         schema: {
  74.             resultListLocator: "dummy",
  75.             resultFields: ["field1", "field2"]
  76.         }
  77.     });
  78.    
  79.     dt = new Y.DataTable.Base({
  80.         columnset: cols,
  81.     }).plug(Y.Plugin.DataTableDataSource, {
  82.         datasource: ds
  83.     }).render("#pizza");
  84.  
  85.     dt.datasource.onDataReturnInitializeTable = function (e) {
  86.         this.get("host").set("recordset", new Y.Recordset({records: e.response.results}));
  87.         this.get("host").plug( Y.Plugin.DataTableScroll, { height:"200px" } );
  88.         this.get("host").set("recordset", new Y.Recordset({records: e.response.results}));
  89.         this.get("host").plug(Y.Plugin.DataTableSort, {
  90.             lastSortedBy: {
  91.                 field: "field1",
  92.                 dir: "asc"
  93.             }
  94.         });
  95.     }
  96.  
  97.     dt.datasource.load();
  98. });
  99. </script>
  100.  
  101. <!--END SOURCE CODE FOR EXAMPLE =============================== -->
  102.  
  103.  
  104. </body>
  105. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement