Integrating DataTable with the TabView widget.
Welcome! There is a DataTable in the second Tab.
id | date | quantity | amount | title | description |
---|---|---|---|---|---|
Loading... | |||||
po-0167 | 03/24/1980 | 1 | $4.00 | A Book About Nothing | Lorem ipsum dolor sit amet consectetuer Quisque ipsum suscipit Aenean ligula. Accumsan molestie nibh dui orci vitae auctor nec pulvinar ligula elit. |
po-0783 | 01/03/1983 | $12.12 | The Meaning of Life | Vestibulum scelerisque wisi adipiscing turpis odio Phasellus euismod id orci tristique. Hendrerit sem dictum volutpat cursus pretium dui vitae tincidunt Vivamus Aenean. | |
po-0297 | 12/12/1978 | 12 | $1.25 | This Book Was Meant to Be Read Aloud | Malesuada pellentesque nibh magna nisl tincidunt wisi dui Nam nunc convallis. Adipiscing leo augue Nulla tellus nec eros metus cursus pretium Sed. |
po-1482 | 03/11/1985 | 6 | $3.50 | Read Me Twice | Libero justo pede nibh tincidunt ut tempus metus et Vestibulum vel. Sem justo morbi lacinia dui turpis In Lorem dictumst volutpat cursus. |
This is another Tab.
Data:
1 | YAHOO.example.Data = { |
2 | bookorders: [ |
3 | {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing", |
4 | description: "Lorem ipsum dolor sit amet consectetuer Quisque ipsum suscipit Aenean ligula. Accumsan molestie nibh dui orci vitae auctor nec pulvinar ligula elit."}, |
5 | {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life", |
6 | description: "Vestibulum scelerisque wisi adipiscing turpis odio Phasellus euismod id orci tristique. Hendrerit sem dictum volutpat cursus pretium dui vitae tincidunt Vivamus Aenean."}, |
7 | {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud", |
8 | description: "Malesuada pellentesque nibh magna nisl tincidunt wisi dui Nam nunc convallis. Adipiscing leo augue Nulla tellus nec eros metus cursus pretium Sed."}, |
9 | {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice", |
10 | description: "Libero justo pede nibh tincidunt ut tempus metus et Vestibulum vel. Sem justo morbi lacinia dui turpis In Lorem dictumst volutpat cursus."} |
11 | ] |
12 | } |
view plain | print | ? |
Markup:
1 | <div id="tvcontainer" class="yui-navset"> |
2 | <ul class="yui-nav"> |
3 | <li class="selected"><a href="#tab1"><em>Start Tab</em></a></li> |
4 | <li><a href="#tab2"><em>DataTable Tab</em></a></li> |
5 | <li><a href="#tab3"><em>Another Tab</em></a></li> |
6 | |
7 | </ul> |
8 | <div class="yui-content"> |
9 | |
10 | <div><p>Welcome! There is a DataTable in the second Tab.</p></div> |
11 | <div id="dtcontainer"></div> |
12 | <div><p>This is another Tab.</p></div> |
13 | </div> |
14 | </div> |
view plain | print | ? |
JavaScript:
1 | YAHOO.util.Event.addListener(window, "load", function() { |
2 | YAHOO.example.TabView = function() { |
3 | var myColumnDefs = [ |
4 | {key:"id", sortable:true}, |
5 | {key:"date", formatter:YAHOO.widget.DataTable.formatDate, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}}, |
6 | {key:"quantity", formatter:YAHOO.widget.DataTable.formatNumber, sortable:true}, |
7 | {key:"amount", formatter:YAHOO.widget.DataTable.formatCurrency, sortable:true}, |
8 | {key:"title", sortable:true}, |
9 | {key:"description"} |
10 | ]; |
11 | |
12 | var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.bookorders); |
13 | myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; |
14 | myDataSource.responseSchema = { |
15 | fields: ["id","date","quantity","amount","title","description"] |
16 | }; |
17 | |
18 | var myDataTable = |
19 | new YAHOO.widget.DataTable("dtcontainer", myColumnDefs, myDataSource,{scrollable:true,width:"100%"}); |
20 | |
21 | var myTabView = new YAHOO.widget.TabView("tvcontainer"); |
22 | myTabView.getTab(1).addListener("click", function() {myDataTable.onShow()}); |
23 | |
24 | return { |
25 | oDS: myDataSource, |
26 | oDT: myDataTable, |
27 | oTV: myTabView |
28 | }; |
29 | }(); |
30 | }); |
view plain | print | ? |
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings