Yahoo! Developer Network Home - Help

YUI Library Examples: DataTable Control (beta): Complex Example of Multiple Features

DataTable Control (beta): Complex Example of Multiple Features

A demonstration of several DataTable features combined in one instance. The features implemented in this example require the Drag and Drop and Animation utilities.

<< first < prev 12345 next > last >>
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
<< first < prev 12345 next > last >>

Sample Code for this Example

Data:

1YAHOO.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:

1YAHOO.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 | ?

YUI Logger Output:

Logger Console

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 &amp; 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 &amp; 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.

Reload with logging
and debugging disabled.

More DataTable Control (beta) Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings