Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title>DataTable + DataSource + Scroll</title>
- <style type="text/css">
- /*margin and padding on body element
- can introduce errors in determining
- element position and are not recommended;
- we turn them off as a foundation for YUI
- CSS treatments. */
- body {
- margin:0;
- padding:0;
- }
- </style>
- <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssfonts/fonts-min.css" />
- <script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
- <!--begin custom header content for this example-->
- <style type="text/css">
- /* custom styles for this example */
- .dt-example {margin:1em;}
- /* css to counter global site css */
- .dt-example th {text-transform:none;}
- .dt-example table {width:auto;}
- .dt-example caption {display:table-caption;}
- </style>
- <!--end custom header content for this example-->
- </head>
- <body class="yui3-skin-sam yui-skin-sam">
- <h1>DataTable + DataSource + Scroll</h1>
- <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
- <div id="pizza" class="dt-example"></div>
- <script type="text/javascript">
- YUI({
- filter: 'raw'
- }).use("datasource", "datatable", function (Y) {
- var myData = {
- "dummy": [
- { "field1": 1, "field2": "y" },
- { "field1": 2, "field2": "n" },
- { "field1": 3, "field2": "n" },
- { "field1": 4, "field2": "n" },
- { "field1": 5, "field2": "n" },
- { "field1": 6, "field2": "n" },
- { "field1": 7, "field2": "n" },
- { "field1": 8, "field2": "n" },
- { "field1": 9, "field2": "n" },
- { "field1": 10, "field2": "y" }
- ]
- },
- cols = [
- {key: "field1", label: "FIELD1", sortable: true},
- {key: "field2", label: "FIELD2", sortable: true}
- ],
- ds, dt;
- ds = new Y.DataSource.Local({source: myData});
- ds.plug(Y.Plugin.DataSourceJSONSchema, {
- schema: {
- resultListLocator: "dummy",
- resultFields: ["field1", "field2"]
- }
- });
- dt = new Y.DataTable.Base({
- columnset: cols,
- }).plug(Y.Plugin.DataTableDataSource, {
- datasource: ds
- }).render("#pizza");
- dt.datasource.onDataReturnInitializeTable = function (e) {
- this.get("host").set("recordset", new Y.Recordset({records: e.response.results}));
- this.get("host").plug( Y.Plugin.DataTableScroll, { height:"200px" } );
- this.get("host").set("recordset", new Y.Recordset({records: e.response.results}));
- this.get("host").plug(Y.Plugin.DataTableSort, {
- lastSortedBy: {
- field: "field1",
- dir: "asc"
- }
- });
- }
- dt.datasource.load();
- });
- </script>
- <!--END SOURCE CODE FOR EXAMPLE =============================== -->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement