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 3018ms (+0) 9:47:13 PM:
DataTable  instance yui-dt0
Post-render routine executed
INFO 3018ms (+31) 9:47:13 PM:
DataTable  instance yui-dt0
DataTable rendered
INFO 2987ms (+3) 9:47:13 PM:
DataTable  instance yui-dt0
DataTable message hidden
INFO 2984ms (+1) 9:47:13 PM:
DataTable  instance yui-dt0
DataTable rendering...
INFO 2983ms (+0) 9:47:13 PM:
RecordSet  instance yui-rs0
Set 25 Record(s) at index 0
INFO 2983ms (+1) 9:47:13 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 2982ms (+0) 9:47:13 PM:
DataSource  instance0
Received live data response for "null"
INFO 2982ms (+1) 9:47:13 PM:
DataSource  instance0
Making connection to live data for "null"
INFO 2981ms (+0) 9:47:13 PM:
DataTable  instance yui-dt0
DataTable showing message: Loading...
WARN 2981ms (+0) 9:47:13 PM:
DataTable  instance yui-dt0
Could not find DragDrop for resizeable Columns
INFO 2981ms (+4) 9:47:13 PM:
DataTable  instance yui-dt0
TH cells for 2 keys created
INFO 2977ms (+0) 9:47:13 PM:
RecordSet  instance yui-rs0
RecordSet initialized
INFO 2977ms (+1) 9:47:13 PM:
ColumnSet  instance yui-cs0
ColumnSet initialized
INFO 2976ms (+463) 9:47:13 PM:
DataSource  instance0
DataSource initialized
INFO 2513ms (+2513) 9:47:13 PM:
LogReader  instance0
LogReader initialized
INFO 0ms (+0) 9:47:10 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