Example: DataTable - Custom Sorting (YUI Library)

# DataTable Widget :: Custom Sorting

### Sample Code

Data:

YAHOO.example.Data.areacodes = [ {areacode: "201", state: "New Jersey"}, ..., {areacode: "989", state: "Michigan"} ];

CSS:

/* custom css*/ #sort {margin:1em;} #sort table {border-collapse:collapse;} #sort th, #sort td {border:1px solid #000;} #sort th {background-color:#696969;}/*dark gray*/ #sort th a {color:#fff;} #sort th .yui-dt-headtext {margin-right:5px;padding-right:15px;} /*room for arrow*/ #sort .yui-dt-sortedbyasc, #sort .yui-dt-sortedbydesc {background-color:#3F3F3F;}/*dark gray*/ #sort .yui-dt-sortedbyasc .yui-dt-headtext {background-image: url('img/arrow_up.gif'); background-repeat:no-repeat; background-position:right;}/*arrow up*/ #sort .yui-dt-sortedbydesc .yui-dt-headtext {background-image: url('img/arrow_dn.gif'); background-repeat:no-repeat; background-position:right;}/*arrow down*/ #sort .yui-dt-odd {background-color:#eee;} /*light gray zebra stripe*/

Markup:

<div id="sort"></div>

JavaScript:

// Custom sort functionality to sort by areacode within states YAHOO.example.sortStatesAsc = function(a, b) { if((a === null) || (typeof a == "undefined")) { if((b === null) || (typeof b == "undefined")) { return 0; } else { return 1; } } else if((b === null) || (typeof b == "undefined")) { return -1; } var comp = YAHOO.util.Sort.compareAsc; var compState = comp(a.state, b.state); return (compState !== 0) ? compState : comp(a.areacode, b.areacode); }; YAHOO.example.sortStatesDesc = function(a, b) { if((a === null) || (typeof a == "undefined")) { if((b === null) || (typeof b == "undefined")) { return 0; } else { return -1; } } else if((b === null) || (typeof b == "undefined")) { return 1; } var comp = YAHOO.util.Sort.compareDesc; var compState = comp(a.state, b.state); return (compState !== 0) ? compState : comp(a.areacode, b.areacode); }; var myColumnHeaders = [ {key:"areacode",text:"Area Codes",sortable:true}, {key:"state",text:"States",sortable:true,sortOptions:{ascFunction:YAHOO.example.sortStatesAsc,descFunction:YAHOO.example.sortStatesDesc}} ]; var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders); var myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes); myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY; myDataSource.responseSchema = { fields: ["areacode","state"] }; var myDataTable = new YAHOO.widget.DataTable("sort",myColumnSet,myDataSource,{caption:"Example: Custom Sorting",sortedBy:{colKey:"areacode",dir:"asc"}}); var onColumnSort = function(oArgs) { var column = oArgs.column; var dir = oArgs.dir; }; myDataTable.subscribe("columnSortEvent",onColumnSort);