YUI Library Home

YUI Library Examples: DataTable Control: Client-side Sorting

DataTable Control: Client-side Sorting

A custom sort handler has been defined in this example to enable custom nested sorting, such that clicking on the "States" Column will sort by states, and then by area code.

View example in new window.

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

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="sort"></div> 
view plain | print | ?

JavaScript:

1YAHOO.util.Event.addListener(window, "load", function() { 
2    YAHOO.example.CustomSort = 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",sortable:true}, 
24            {key:"state",label:"States",sortable:true,sortOptions:{sortFunction:sortStates}} 
25        ]; 
26 
27        var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes.slice(0,25)); 
28        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; 
29        myDataSource.responseSchema = { 
30            fields: ["areacode","state"] 
31        }; 
32 
33        var myDataTable = new YAHOO.widget.DataTable("sort", myColumnDefs, 
34                myDataSource, {sortedBy:{key:"areacode", dir:"asc"}}); 
35                 
36        return { 
37            oDS: myDataSource, 
38            oDT: myDataTable 
39        }; 
40    }(); 
41}); 
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 3163ms (+1) 7:37:20 PM:
DataTable  instance yui-dt0
Post-render routine executed
INFO 3162ms (+16) 7:37:20 PM:
DataTable  instance yui-dt0
DataTable rendered
INFO 3146ms (+4) 7:37:20 PM:
DataTable  instance yui-dt0
DataTable message hidden
INFO 3142ms (+0) 7:37:20 PM:
DataTable  instance yui-dt0
DataTable rendering...
INFO 3142ms (+1) 7:37:20 PM:
RecordSet  instance yui-rs0
Set 25 Record(s) at index 0
INFO 3141ms (+0) 7:37:20 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}]}
INFO 3141ms (+1) 7:37:20 PM:
DataSource  instance0
Received live data response for "null"
INFO 3140ms (+1) 7:37:20 PM:
DataSource  instance0
Making connection to live data for "null"
INFO 3139ms (+1) 7:37:20 PM:
DataTable  instance yui-dt0
DataTable showing message: Loading...
WARN 3138ms (+0) 7:37:20 PM:
DataTable  instance yui-dt0
Could not find DragDrop for resizeable Columns
INFO 3138ms (+3) 7:37:20 PM:
DataTable  instance yui-dt0
TH cells for 2 keys created
INFO 3135ms (+0) 7:37:20 PM:
RecordSet  instance yui-rs0
RecordSet initialized
INFO 3135ms (+1) 7:37:20 PM:
ColumnSet  instance yui-cs0
ColumnSet initialized
INFO 3134ms (+922) 7:37:20 PM:
DataSource  instance0
DataSource initialized
INFO 2212ms (+2212) 7:37:19 PM:
LogReader  instance0
LogReader initialized
INFO 0ms (+0) 7:37:17 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 © 2010 Yahoo! Inc. All rights reserved.

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