YUI DataTable Sorting

Question

Hello,

I'm using a YUI datatable to create some basic client side sorting for some stats, returned via a web service I've created. Didn't quite want to figure out YUI's ajax datasource stuff, so I'm loading the data in via jquery and addRow()'ing the data. The problem is, all the data is not sorting properly. The string field seems to be a random order, and the number/float columns seem to be sorting as strings (7 appears above 635).

The initial table definition is as follows:

var myColumnDefs = [
             {key:"appname",label:"Application Name", sortable:true},
             {key:"membercount",label:"Member Count",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true},
             {key:"loggedin",label:"Logged In",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true},
             {key:"peakoccupance",label:"Peak Occupance",formatter:YAHOO.widget.DataTable.formatNumber,sortable:true},
             {key:"averageoccupance",label:"Average Occupance",formatter:YAHOO.widget.DataTable.formatFloat,sortable:true}
         ];

         this.myDataSource = new YAHOO.util.DataSource([]); 
         this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
         this.myDataSource.responseSchema = {
             fields: [{key:"appname", parser:YAHOO.util.DataSourceBase.parseString},
               {key:"membercount", parser:YAHOO.util.DataSourceBase.parseNumber},
               {key:"loggedin", parser:YAHOO.util.DataSourceBase.parseNumber},
               {key:"peakoccupance", parser:YAHOO.util.DataSourceBase.parseNumber},
               {key:"averageoccupance", parser:YAHOO.util.DataSourceBase.parseNumber}
             ]
         };

         this.myDataTable = new YAHOO.widget.DataTable("markup", myColumnDefs, this.myDataSource,
                 {sortedBy:{key:"membercount",dir:"desc"}}
         );

The data is loaded like this:

function xmlCallback(xml){        
  if( $(xml).find('memberCount').text() != "0" ){
   var appName = $(xml).find('appname').text();
   var appID = $(xml).find('appid').text();     
   var memberCount = $(xml).find('memberCount').text();
   var zoneOccupance = $(xml).find('zoneOccupance').text();
   var peakOccupance = $(xml).find('peakOccupance').text();
   var averageOccupance = $(xml).find('averageOccupance').text();

   console.log( appName+" loaded..." );

   if( memberCount != "0" ){

    var allData = {
     row: count,
     appname: appName,
     membercount: memberCount, 
     loggedin: zoneOccupance, 
     peakoccupance: peakOccupance, 
     averageoccupance: averageOccupance
    };

    sococo.myDataTable.addRow( allData, count );
    count++;
    $("appsloaded").html( count );
   }
   else{
    appCount--;
    $("totalapps").html( appCount );
   }
  }

Everything populates, I just get a shite sorting order. What am I forgetting here?

Thanks, Josh

Answer 1

Okay, figured this out after finding a random bit of information in one of Yahoo's samples. Apparently, if you don't explicitly set the sortedBy field to null after you've made an update, and you've declared the sortedBy option previously, it will keep the previously found sorting order. My guess is some kind of caching so its not performing the same costly client side sorts over and over.

So the code that fixed this was the following:

var allData = {
    row: count,
    appname: String(appName),
    membercount: Number(memberCount), 
    loggedin: Number(zoneOccupance), 
    peakoccupance: Number(peakOccupance), 
    averageoccupance: Number(averageOccupance)
};

sococo.myDataTable.addRow( allData, count );
sococo.myDataTable.set( "sortedBy", null );