YUI Library Examples: DataTable Control (beta): Client-side Sorting

Sample Code for this Example

Data:

CSS:

Markup:

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.CustomSort = new function() {
        // Custom sort handler to sort by state and then by areacode
        // where a and b are Record instances to compare
        this.sortStates = function(a, b, desc) {
            // Deal with empty values
            if(!YAHOO.lang.isValue(a)) {
                return (!YAHOO.lang.isValue(b)) ? 0 : 1;
            }
            else if(!YAHOO.lang.isValue(b)) {
                return -1;
            }

// First compare by state
            var comp = YAHOO.util.Sort.compare;
            var compState = comp(a.getData("state"), b.getData("state"), desc);

// If states are equal, then compare by areacode
            return (compState !== 0) ? compState : comp(a.getData("areacode"), b.getData("areacode"), desc);
        };

var myColumnDefs = [
            {key:"areacode",label:"Area Codes",sortable:true},
            {key:"state",label:"States",sortable:true,sortOptions:{sortFunction:this.sortStates}}
        ];

this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.areacodes);
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        this.myDataSource.responseSchema = {
            fields: ["areacode","state"]
        };

this.myDataTable = new YAHOO.widget.DataTable("sort", myColumnDefs,
                this.myDataSource, {sortedBy:{key:"areacode", dir:"asc"}});
    };
});

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

YUI Library Examples: DataTable Control (beta): Client-side Sorting

Sample Code for this Example

YUI Logger Output:

DataTable Control (beta) Examples:

More DataTable Control (beta) Resources: