Question

I am using a YUI DataTable with a custom sortFunction that strips out HTML code, to sort based on the text content only, rather than the entire string with HTML tags. The problem that I am having is that I need to make use of this sort function on three different columns, and I can not seem to pass the “field” value into my sort function. I want to use “field” rather than naming the column – because I would like to use the same sort function for all three columns rather than repeat it three times as I have in the code below. When I pass in “field” the sort stalls or hangs in the browser and “field” seems to be “undefined”. Any ideas?

YAHOO.util.Event.addListener(window, "load", function() {

    var sortProject = function(a, b, desc) {
        var col = "project";
        // Deal with empty values 
            if(!YAHOO.lang.isValue(a)) {
                return (!YAHOO.lang.isValue(b)) ? 0 : 1;
            } 
            else if(!YAHOO.lang.isValue(b)) {
                return -1;
            }
        var comp = YAHOO.util.Sort.compare;
        var tagregex = /<[^>]*>/g;
        var aString = a.getData(col).replace(tagregex, "");
        var bString = b.getData(col).replace(tagregex, "");
        var compString = comp(aString, bString, desc);
        return compString;
    };

    var sortArchitect = function(a, b, desc) {
        var col = "architect"
        // Deal with empty values 
            if(!YAHOO.lang.isValue(a)) {
                return (!YAHOO.lang.isValue(b)) ? 0 : 1;
            }
            else if(!YAHOO.lang.isValue(b)) {
                return -1;
            }
        var comp = YAHOO.util.Sort.compare;
        var tagregex = /<[^>]*>/g;
        var aString = a.getData(col).replace(tagregex, "");
        var bString = b.getData(col).replace(tagregex, "");
        var compString = comp(aString, bString, desc);
        return compString;
    };

    var sortStatus = function(a, b, desc) {
        var col = "status"
        // Deal with empty values 
            if(!YAHOO.lang.isValue(a)) {
                return (!YAHOO.lang.isValue(b)) ? 0 : 1;
            }
            else if(!YAHOO.lang.isValue(b)) {
                return -1;
            }
        var comp = YAHOO.util.Sort.compare;
        var tagregex = /<[^>]*>/g;
        var aString = a.getData(col).replace(tagregex, "");
        var bString = b.getData(col).replace(tagregex, "");
        var compString = comp(aString, bString, desc);
        return compString;
    };

    var myColumnDefs = [
        {key:"design",label:"<span class='dtTitleText'>Design</span>", width:105, formatter:YAHOO.widget.DataTable.formatDate, sortable:true},
        {key:"status",label:"<span class='dtTitleText'>Status</span> <sup>1</sup>", sortable:true, width:62, sortOptions:{sortFunction:sortStatus}},
        {key:"project",label:"<span class='dtTitleText'>Project Name</span>", sortable:true, width:105, sortOptions:{sortFunction:sortProject}},
        {key:"address",label:"<span class='dtTitleTextNoSort'>Address</span>", width:80, sortable:false},
        {key:"city",label:"<span class='dtTitleText'>City</span>", width:80, sortable:true},
        {key:"state",label:"<span class='dtTitleText'>State</span>", width:45, sortable:true},
        {key:"type",label:"<span class='dtTitleText'>Building <br />Type</span>", width:75, sortable:true},
        {key:"feet",label:"<span class='dtTitleText'>Gross <br />Sq. Ft.</span>", width:55, formatter:YAHOO.widget.DataTable.formatNumber,sortable:true},
        {key:"owner",label:"<span class='dtTitleText'>Building <br />Owner</span>", width:95, sortable:true},
        {key:"architect",label:"<span class='dtTitleText'>Architect of <br />Record (AOR)</span>", width:115, sortable:true, sortOptions:{sortFunction:sortArchitect}}
    ];

    var myDataSource = new YAHOO.util.DataSource(YAHOO.util.Dom.get("storableTable"));
    myDataSource.responseType = YAHOO.util.DataSource.TYPE_HTMLTABLE;
    myDataSource.responseSchema = {
        fields: [{key:"design", parser:"number"},
                {key:"status"},
                {key:"project"},
                {key:"address"},
                {key:"city"},
                {key:"state"},
                {key:"type"},
                {key:"feet", parser:"number"},
                {key:"owner"},
                {key:"architect"}
        ]
    };

    var myDataTable = new YAHOO.widget.DataTable("progEnhanceTable", myColumnDefs, myDataSource,
            {sortedBy:{key:"design",dir:"desc"}, renderLoopSize: 50}
    );

    return {
        oDS: myDataSource,
        oDT: myDataTable
    }; });

Answer 1

How about generating the sort functions in a function:

function makeSortFunction(col) {
    return function(a, b, desc) {

        // NOTE: the passed 'col' variable is available inside closure...

        // Deal with empty values 
            if(!YAHOO.lang.isValue(a)) {
                return (!YAHOO.lang.isValue(b)) ? 0 : 1;
            } 
            else if(!YAHOO.lang.isValue(b)) {
                return -1;
            }
        var comp = YAHOO.util.Sort.compare;
        var tagregex = /<[^>]*>/g;
        var aString = a.getData(col).replace(tagregex, "");
        var bString = b.getData(col).replace(tagregex, "");
        var compString = comp(aString, bString, desc);
        return compString;
    };
}

And use it as

{key:"status",label:"<span class='dtTitleText'>Status</span> <sup>1</sup>", sortable:true, width:62, sortOptions:{sortFunction:makeSortFunction('status')}},
{key:"project",label:"<span class='dtTitleText'>Project Name</span>", sortable:true, width:105, sortOptions:{sortFunction:makeSortFunction('project')}},

Rather than referring to the function, this is calling makeSortFunction(), which returns the actual sort function.