A demonstration of several DataTable features combined in one instance. The features implemented in this example require the Drag and Drop and Animation utilities.
Area Codes | States | Notes (editable) |
---|---|---|
201 | New Jersey | |
202 | Washington, DC | |
203 | Connecticut | |
204 | Manitoba, Canada | |
205 | Alabama | |
206 | Washington | |
207 | Maine | |
208 | Idaho | |
209 | California | |
210 | Texas | |
212 | New York | |
213 | California | |
214 | Texas | |
215 | Pennsylvania | |
216 | Ohio | |
217 | Illinois | |
218 | Minnesota | |
219 | Indiana | |
224 | Illinois | |
225 | Louisiana | |
227 | Maryland | |
228 | Mississippi | |
229 | Georgia | |
231 | Michigan | |
234 | Ohio | |
Loading data... |
Data:
1 | YAHOO.example.Data = { |
2 | areacodes: [ |
3 | {areacode: "201", state: "New Jersey"}, |
4 | {areacode: "202", state: "Washington, DC"}, |
5 | {areacode: "203", state: "Connecticut"}, |
6 | ... |
7 | ] |
8 | } |
view plain | print | ? |
CSS:
1 | /* No custom CSS. */ |
view plain | print | ? |
Markup:
1 | <div id="complex"></div> |
view plain | print | ? |
JavaScript:
1 | YAHOO.util.Event.addListener(window, "load", function() { |
2 | YAHOO.example.MultipleFeatures = new function() { |
3 | // Custom sort handler to sort by state and then by areacode |
4 | // where a and b are Record instances to compare |
5 | this.sortStates = function(a, b, desc) { |
6 | // Deal with empty values |
7 | if(!YAHOO.lang.isValue(a)) { |
8 | return (!YAHOO.lang.isValue(b)) ? 0 : 1; |
9 | } |
10 | else if(!YAHOO.lang.isValue(b)) { |
11 | return -1; |
12 | } |
13 | |
14 | // First compare by state |
15 | var comp = YAHOO.util.Sort.compare; |
16 | var compState = comp(a.getData("state"), b.getData("state"), desc); |
17 | |
18 | // If states are equal, then compare by areacode |
19 | return (compState !== 0) ? compState : comp(a.getData("areacode"), b.getData("areacode"), desc); |
20 | }; |
21 | |
22 | var myColumnDefs = [ |
23 | {key:"areacode",label:"Area Codes",width:100,resizeable:true,sortable:true}, |
24 | {key:"state",label:"States",width:250,resizeable:true,sortable:true, |
25 | sortOptions:{sortFunction:this.sortStates}}, |
26 | {key:"notes",label:"Notes (editable)",editor:"textbox",resizeable:true,sortable:true} |
27 | ]; |
28 | |
29 | this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes); |
30 | this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; |
31 | this.myDataSource.responseSchema = { |
32 | fields: ["areacode","state"] |
33 | }; |
34 | |
35 | var myConfigs = { |
36 | sortedBy:{key:"areacode",dir:"asc"}, |
37 | paginator: new YAHOO.widget.Paginator({ |
38 | rowsPerPage: 25, |
39 | dropdownOptions: [10,25,50,100], |
40 | pageLinks: 5 |
41 | }), |
42 | scrollable:true, |
43 | height:"25em" |
44 | } |
45 | |
46 | this.myDataTable = new YAHOO.widget.DataTable("complex", myColumnDefs, this.myDataSource, myConfigs); |
47 | this.myDataTable.subscribe("rowClickEvent",this.myDataTable.onEventSelectRow); |
48 | this.myDataTable.subscribe("cellDblclickEvent",this.myDataTable.onEventShowCellEditor); |
49 | this.myDataTable.subscribe("editorBlurEvent", this.myDataTable.onEventSaveCellEditor); |
50 | |
51 | // When cell is edited, pulse the color of the row yellow |
52 | this.onCellEdit = function(oArgs) { |
53 | var elCell = oArgs.editor.cell; |
54 | var oOldData = oArgs.oldData; |
55 | var oNewData = oArgs.newData; |
56 | |
57 | // Grab the row el and the 2 colors |
58 | var elRow = this.getTrEl(elCell); |
59 | var origColor = YAHOO.util.Dom.getStyle(elRow.cells[0], "backgroundColor"); |
60 | var pulseColor = "#ff0"; |
61 | |
62 | // Create a temp anim instance that nulls out when anim is complete |
63 | var rowColorAnim = new YAHOO.util.ColorAnim(elRow.cells, { |
64 | backgroundColor:{to:origColor, from:pulseColor}, duration:2}); |
65 | var onComplete = function() { |
66 | rowColorAnim = null; |
67 | YAHOO.util.Dom.setStyle(elRow.cells, "backgroundColor", ""); |
68 | } |
69 | rowColorAnim.onComplete.subscribe(onComplete); |
70 | rowColorAnim.animate(); |
71 | } |
72 | this.myDataTable.subscribe("editorSaveEvent", this.onCellEdit); |
73 | }; |
74 | }); |
view plain | print | ? |
INFO3568ms (+64) 1:27:11 PM:DataTable instance yui-dt0
DataTable initialized with 25 of 328 rows
INFO3504ms (+3) 1:27:11 PM:DataTable instance yui-dt0
DataTable message hidden
INFO3501ms (+0) 1:27:11 PM:DataTable instance yui-dt0
DataTable rendering...
INFO3501ms (+1) 1:27:11 PM:DataTable instance yui-dt0
DataTable showing message: Loading data...
INFO3500ms (+1) 1:27:11 PM:RecordSet instance yui-rs0
Set 328 Record(s) at index 0
INFO3499ms (+3) 1:27:11 PM:DataSource instance0
Parsed array data is {results => [{state => New Jersey, areacode => 201}, {state => Washington, DC, areacode => 202}, {state => Connecticut, areacode => 203}, {state => Manitoba, Canada, areacode => 204}, {state => Alabama, areacode => 205}, {state => Washington, areacode => 206}, {state => Maine, areacode => 207}, {state => Idaho, areacode => 208}, {state => California, areacode => 209}, {state => Texas, areacode => 210}, {state => New York, areacode => 212}, {state => California, areacode => 213}, {state => Texas, areacode => 214}, {state => Pennsylvania, areacode => 215}, {state => Ohio, areacode => 216}, {state => Illinois, areacode => 217}, {state => Minnesota, areacode => 218}, {state => Indiana, areacode => 219}, {state => Illinois, areacode => 224}, {state => Louisiana, areacode => 225}, {state => Maryland, areacode => 227}, {state => Mississippi, areacode => 228}, {state => Georgia, areacode => 229}, {state => Michigan, areacode => 231}, {state => Ohio, areacode => 234}, {state => Florida, areacode => 239}, {state => Maryland, areacode => 240}, {state => Bahamas, areacode => 242}, {state => Barbados, areacode => 246}, {state => Michigan, areacode => 248}, {state => British Columbia, areacode => 250}, {state => Alabama, areacode => 251}, {state => North Carolina, areacode => 252}, {state => Washington, areacode => 253}, {state => Texas, areacode => 254}, {state => Alabama, areacode => 256}, {state => Indiana, areacode => 260}, {state => Wisconsin, areacode => 262}, {state => Anguilla, areacode => 264}, {state => Pennsylvania, areacode => 267}, {state => Antigua and Barbuda, areacode => 268}, {state => Michigan, areacode => 269}, {state => Kentucky, areacode => 270}, {state => Virginia, areacode => 276}, {state => Texas, areacode => 281}, {state => Ohio, areacode => 283}, {state => British Virgin Islands, areacode => 284}, {state => Ontario, areacode => 289}, {state => Maryland, areacode => 301}, {state => Delaware, areacode => 302}, {state => Colorado, areacode => 303}, {state => West Virginia, areacode => 304}, {state => Florida, areacode => 305}, {state => Saskatchewan, Canada, areacode => 306}, {state => Wyoming, areacode => 307}, {state => Nebraska, areacode => 308}, {state => Illinois, areacode => 309}, {state => California, areacode => 310}, {state => Illinois, areacode => 312}, {state => Michigan, areacode => 313}, {state => Missouri, areacode => 314}, {state => New York, areacode => 315}, {state => Kansas, areacode => 316}, {state => Indiana, areacode => 317}, {state => Louisiana, areacode => 318}, {state => Iowa, areacode => 319}, {state => Minnesota, areacode => 320}, {state => Florida, areacode => 321}, {state => California, areacode => 323}, {state => Ohio, areacode => 330}, {state => Illinois, areacode => 331}, {state => Alabama, areacode => 334}, {state => North Carolina, areacode => 336}, {state => Louisiana, areacode => 337}, {state => Massachusetts, areacode => 339}, {state => US Virgin Islands, areacode => 340}, {state => Cayman Islands, areacode => 345}, {state => New York, areacode => 347}, {state => Massachusetts, areacode => 351}, {state => Florida, areacode => 352}, {state => Washington, areacode => 360}, {state => Texas, areacode => 361}, {state => Florida, areacode => 386}, {state => Rhode Island, areacode => 401}, {state => Nebraska, areacode => 402}, {state => Alberta, Canada, areacode => 403}, {state => Georgia, areacode => 404}, {state => Oklahoma, areacode => 405}, {state => Montana, areacode => 406}, {state => Florida, areacode => 407}, {state => California, areacode => 408}, {state => Texas, areacode => 409}, {state => Maryland, areacode => 410}, {state => Pennsylvania, areacode => 412}, {state => Massachusetts, areacode => 413}, {state => Wisconsin, areacode => 414}, {state => California, areacode => 415}, {state => Ontario, Canada, areacode => 416}, {state => Missouri, areacode => 417}, {state => Quebec, Canada, areacode => 418}, {state => Ohio, areacode => 419}, {state => Tennessee, areacode => 423}, {state => California, areacode => 424}, {state => Washington, areacode => 425}, {state => Virginia, areacode => 434}, {state => Utah, areacode => 435}, {state => Ohio, areacode => 440}, {state => Bermuda, areacode => 441}, {state => Maryland, areacode => 443}, {state => Pennsylvania, areacode => 445}, {state => Quebec, Canada, areacode => 450}, {state => Illinois, areacode => 464}, {state => Texas, areacode => 469}, {state => Georgia, areacode => 470}, {state => Grenada, areacode => 473}, {state => Connecticut, areacode => 475}, {state => Georgia, areacode => 478}, {state => Arkansas, areacode => 479}, {state => Arizona, areacode => 480}, {state => Pennsylvania, areacode => 484}, {state => Arkansas, areacode => 501}, {state => Kentucky, areacode => 502}, {state => Oregon, areacode => 503}, {state => Louisiana, areacode => 504}, {state => New Mexico, areacode => 505}, {state => New Brunswick, Canada, areacode => 506}, {state => Minnesota, areacode => 507}, {state => Massachusetts, areacode => 508}, {state => Washington, areacode => 509}, {state => California, areacode => 510}, {state => Texas, areacode => 512}, {state => Ohio, areacode => 513}, {state => Quebec, Canada, areacode => 514}, {state => Iowa, areacode => 515}, {state => New York, areacode => 516}, {state => Michigan, areacode => 517}, {state => New York, areacode => 518}, {state => Ontario, Canada, areacode => 519}, {state => Arizona, areacode => 520}, {state => California, areacode => 530}, {state => Virginia, areacode => 540}, {state => Oregon, areacode => 541}, {state => New Jersey, areacode => 551}, {state => Missouri, areacode => 557}, {state => California, areacode => 559}, {state => Florida, areacode => 561}, {state => California, areacode => 562}, {state => Iowa, areacode => 563}, {state => Washington, areacode => 564}, {state => Ohio, areacode => 567}, {state => Pennsylvania, areacode => 570}, {state => Virginia, areacode => 571}, {state => Missouri, areacode => 573}, {state => Indiana, areacode => 574}, {state => Oklahoma, areacode => 580}, {state => New York, areacode => 585}, {state => Michigan, areacode => 586}, {state => Mississippi, areacode => 601}, {state => Arizona, areacode => 602}, {state => New Hampshire, areacode => 603}, {state => British Columbia, Canada, areacode => 604}, {state => South Dakota, areacode => 605}, {state => Kentucky, areacode => 606}, {state => New York, areacode => 607}, {state => Wisconsin, areacode => 608}, {state => New Jersey, areacode => 609}, {state => Pennsylvania, areacode => 610}, {state => Minnesota, areacode => 612}, {state => Ontario, Canada, areacode => 613}, {state => Ohio, areacode => 614}, {state => Tennessee, areacode => 615}, {state => Michigan, areacode => 616}, {state => Massachusetts, areacode => 617}, {state => Illinois, areacode => 618}, {state => California, areacode => 619}, {state => Kansas, areacode => 620}, {state => Arizona, areacode => 623}, {state => California, areacode => 626}, {state => Illinois, areacode => 630}, {state => New York, areacode => 631}, {state => Missouri, areacode => 636}, {state => Iowa, areacode => 641}, {state => New York, areacode => 646}, {state => Ontario, Canada, areacode => 647}, {state => Turks and Caicos Islands, areacode => 649}, {state => California, areacode => 650}, {state => Minnesota, areacode => 651}, {state => Missouri, areacode => 660}, {state => California, areacode => 661}, {state => Mississippi, areacode => 662}, {state => Montserrat, areacode => 664}, {state => Maryland, areacode => 667}, {state => CNMI, areacode => 670}, {state => Guam, areacode => 671}, {state => Georgia, areacode => 678}, {state => Texas, areacode => 682}, {state => North Dakota, areacode => 701}, {state => Nevada, areacode => 702}, {state => Virginia, areacode => 703}, {state => North Carolina, areacode => 704}, {state => Ontario, Canada, areacode => 705}, {state => Georgia, areacode => 706}, {state => California, areacode => 707}, {state => Illinois, areacode => 708}, {state => Newfoundland, Canada, areacode => 709}, {state => Iowa, areacode => 712}, {state => Texas, areacode => 713}, {state => California, areacode => 714}, {state => Wisconsin, areacode => 715}, {state => New York, areacode => 716}, {state => Pennsylvania, areacode => 717}, {state => New York, areacode => 718}, {state => Colorado, areacode => 719}, {state => Colorado, areacode => 720}, {state => Pennsylvania, areacode => 724}, {state => Florida, areacode => 727}, {state => Tennessee, areacode => 731}, {state => New Jersey, areacode => 732}, {state => Michigan, areacode => 734}, {state => Texas, areacode => 737}, {state => Ohio, areacode => 740}, {state => Florida, areacode => 754}, {state => Viriginia, areacode => 757}, {state => St. Lucia, areacode => 758}, {state => California, areacode => 760}, {state => Minnesota, areacode => 763}, {state => Indiana, areacode => 765}, {state => Dominica, areacode => 767}, {state => Georgia, areacode => 770}, {state => Florida, areacode => 772}, {state => Illinois, areacode => 773}, {state => Massachusetts, areacode => 774}, {state => Nevada, areacode => 775}, {state => British Columbia, Canada, areacode => 778}, {state => Alberta, Canada, areacode => 780}, {state => Massachusetts, areacode => 781}, {state => St. Vincent & Gren., areacode => 784}, {state => Kansas, areacode => 785}, {state => Florida, areacode => 786}, {state => Puerto Rico, areacode => 787}, {state => Utah, areacode => 801}, {state => Vermont, areacode => 802}, {state => South Carolina, areacode => 803}, {state => Virginia, areacode => 804}, {state => California, areacode => 805}, {state => Texas, areacode => 806}, {state => Ontario, Canada, areacode => 807}, {state => Hawaii, areacode => 808}, {state => Dominican Republic, areacode => 809}, {state => Michigan, areacode => 810}, {state => Indiana, areacode => 812}, {state => Florida, areacode => 813}, {state => Pennsylvania, areacode => 814}, {state => Illinois, areacode => 815}, {state => Missouri, areacode => 816}, {state => Texas, areacode => 817}, {state => California, areacode => 818}, {state => Quebec, Canada, areacode => 819}, {state => North Carolina, areacode => 828}, {state => Texas, areacode => 830}, {state => California, areacode => 831}, {state => Texas, areacode => 832}, {state => Pennsylvania, areacode => 835}, {state => South Carolina, areacode => 843}, {state => New York, areacode => 845}, {state => Illinois, areacode => 847}, {state => New Jersey, areacode => 848}, {state => Florida, areacode => 850}, {state => New Jersey, areacode => 856}, {state => Massachusetts, areacode => 857}, {state => California, areacode => 858}, {state => Kentucky, areacode => 859}, {state => Connecticut, areacode => 860}, {state => New Jersey, areacode => 862}, {state => Florida, areacode => 863}, {state => South Carolina, areacode => 864}, {state => Tennessee, areacode => 865}, {state => Yukon, NW Territories, Canada, areacode => 867}, {state => Trinidad and Tobago, areacode => 868}, {state => St. Kitts & Nevis, areacode => 869}, {state => Arkansas, areacode => 870}, {state => Illinois, areacode => 872}, {state => Jamaica, areacode => 876}, {state => Pennsylvania, areacode => 878}, {state => Tennessee, areacode => 901}, {state => Nova Scotia, Canada, areacode => 902}, {state => Texas, areacode => 903}, {state => Florida, areacode => 904}, {state => Ontario, Canada, areacode => 905}, {state => Michigan, areacode => 906}, {state => Alaska, areacode => 907}, {state => New Jersey, areacode => 908}, {state => California, areacode => 909}, {state => North Carolina, areacode => 910}, {state => Georgia, areacode => 912}, {state => Kansas, areacode => 913}, {state => New York, areacode => 914}, {state => Texas, areacode => 915}, {state => California, areacode => 916}, {state => New York, areacode => 917}, {state => Oklahoma, areacode => 918}, {state => North Carolina, areacode => 919}, {state => Wisconsin, areacode => 920}, {state => California, areacode => 925}, {state => Arizona, areacode => 928}, {state => Tennessee, areacode => 931}, {state => Texas, areacode => 936}, {state => Ohio, areacode => 937}, {state => Puerto Rico, areacode => 939}, {state => Texas, areacode => 940}, {state => Florida, areacode => 941}, {state => Michigan, areacode => 947}, {state => California, areacode => 949}, {state => Minnesota, areacode => 952}, {state => Florida, areacode => 954}, {state => Texas, areacode => 956}, {state => Connecticut, areacode => 959}, {state => Colorado, areacode => 970}, {state => Oregon, areacode => 971}, {state => Texas, areacode => 972}, {state => New Jersey, areacode => 973}, {state => Missouri, areacode => 975}, {state => Massachusetts, areacode => 978}, {state => Texas, areacode => 979}, {state => North Carolina, areacode => 980}, {state => North Carolina, areacode => 984}, {state => Louisiana, areacode => 985}, {state => Michigan, areacode => 989}]}
INFO3496ms (+1) 1:27:11 PM:DataSource instance0
Received live data response for "null"
INFO3495ms (+4) 1:27:11 PM:DataSource instance0
Making connection to live data for "null"
INFO3491ms (+2) 1:27:11 PM:DataTable instance yui-dt0
DataTable showing message: Loading data...
INFO3489ms (+0) 1:27:11 PM:DataTable instance yui-dt0
Accessibility TH cells for 3keys created
INFO3489ms (+5) 1:27:11 PM:DataTable instance yui-dt0
TH cells for 3 keys created
INFO3484ms (+1) 1:27:11 PM:RecordSet instance yui-rs0
RecordSet initialized
INFO3483ms (+2) 1:27:11 PM:ColumnSet instance yui-cs0
ColumnSet initialized
INFO3481ms (+13) 1:27:11 PM:DataSource instance0
DataSource initialized
INFO3468ms (+3468) 1:27:11 PM:LogReader instance0
LogReader initialized
INFO0ms (+0) 1:27:07 PM:global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings