YUI Library Home

YUI Library Examples: DataTable Control: Complex Example of Multiple Features

DataTable Control: 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 >>
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 = function() { 
3        // Custom sort handler to sort by state and then by areacode 
4        // where a and b are Record instances to compare 
5        var 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:sortStates}}, 
26            {key:"notes",label:"Notes (editable)",editor:"textbox",resizeable:true,sortable:true
27        ]; 
28 
29        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes); 
30        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
31        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                template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE, 
40                rowsPerPageOptions: [10,25,50,100], 
41                pageLinks: 5 
42            }), 
43            draggableColumns:true 
44        } 
45 
46        var myDataTable = new YAHOO.widget.DataTable("complex", myColumnDefs, myDataSource, myConfigs); 
47        myDataTable.subscribe("rowClickEvent",myDataTable.onEventSelectRow); 
48        myDataTable.subscribe("cellDblclickEvent",myDataTable.onEventShowCellEditor); 
49        myDataTable.subscribe("editorBlurEvent", myDataTable.onEventSaveCellEditor); 
50 
51        // When cell is edited, pulse the color of the row yellow 
52        var onCellEdit = function(oArgs) { 
53            var elCell = oArgs.editor.getTdEl(); 
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        myDataTable.subscribe("editorSaveEvent", onCellEdit); 
73         
74        return { 
75            oDS: myDataSource, 
76            oDT: myDataTable 
77        }; 
78    }(); 
79}); 
view plain | print | ?

Configuration for This Example

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.

YUI Logger Output:

Logger Console

INFO 3743ms (+0) 3:32:34 PM:

DataTable instance yui-dt0

Post-render routine executed

INFO 3743ms (+30) 3:32:34 PM:

DataTable instance yui-dt0

DataTable rendered

INFO 3713ms (+4) 3:32:34 PM:

DataTable instance yui-dt0

DataTable message hidden

INFO 3709ms (+1) 3:32:34 PM:

DataTable instance yui-dt0

DataTable rendering...

INFO 3708ms (+2) 3:32:34 PM:

RecordSet instance yui-rs0

Set 328 Record(s) at index 0

INFO 3706ms (+3) 3:32:34 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}]}

INFO 3703ms (+1) 3:32:34 PM:

DataSource instance0

Received live data response for "null"

INFO 3702ms (+1) 3:32:34 PM:

DataSource instance0

Making connection to live data for "null"

INFO 3701ms (+6) 3:32:34 PM:

DataTable instance yui-dt0

DataTable showing message: Loading...

INFO 3695ms (+4) 3:32:34 PM:

DataTable instance yui-dt0

TH cells for 3 keys created

INFO 3691ms (+0) 3:32:34 PM:

RecordSet instance yui-rs0

RecordSet initialized

INFO 3691ms (+0) 3:32:34 PM:

ColumnSet instance yui-cs0

ColumnSet initialized

WARN 3691ms (+4) 3:32:34 PM:

Column instance yui-col2

The Column property editor must be an instance of YAHOO.widget.CellEditor

INFO 3687ms (+12) 3:32:34 PM:

DataSource instance0

DataSource initialized

INFO 3675ms (+3675) 3:32:34 PM:

LogReader instance0

LogReader initialized

INFO 0ms (+0) 3:32:31 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 Resources:

Copyright © 2009 Yahoo! Inc. All rights reserved.

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