Question

EDIT 4/16/2012: I fixed the problems and have the sortings working appropriately. I also have converted the timezones into their one letter UTC codes (A-Z). The only thing left is getting the formatter to check for Daylight Savings, but there’s a lot on that subject. However feel free to contribute if you want it would be most welcomed. Thank you all for helping me out in reaching the goal.

EDIT2 4/16/2012: I solved it!! Due to the date being already in UTC, I was doing some needless conversions that were creating some conflicts/weird results. This question is to be considered SOLVED. Thank you everyone who helped.

I’m using knockoutjs to create a widget (table in html/javascript) that pulls info dynamically from my server. I’m stuck on sorting methods for this. I have made and downloaded different versions of table sorting methods but they all make the initial data that is pulled from the server disappear. They treat the tables like the info can’t be edited; so there seems to be a conflict with my table as I need to make all the info be editable.

Right now in my ViewModel.js file I have:

Event(column1,column2,column3,...columnN){
    var self = this;
    self.column1 = column1;
    self.column2 = column2;
    .
    .
}

function ViewModel(){
    var self= this;
    self.rows = ko.observableArray([]);

    self.addRow = function(){
        self.rows.push("","",.......);
    }

    //THIS REMOVE FUNCTION DOESN'T WORK
    self.removeRow = function(row)
        self.rows.remove(row);
    }

    //THIS DOESN'T WORK EITHER, a.column and b.column, the 'column would be column1, 
    //column2, etc.
    self.SortMethod = function(){
        self.items.sort(function(a,b){
            return a.column < b.column ? -1 : 1;
        });
    }
}

//navigate to the server and its info
function getEvents(){
    $get.JSON("http://......", 
      function(data){
          $.each(data.d, function(i,item){handleEvent(item)})
      }
    );
}

//this populates the rows/columns in the table with the events(info) from the server
//Here, 'Model' is a new ViewModel which is declared further below
function handleEvent(item){
    var newEvent = new Event(item.Event1, item.Event2,.....);
    this.Model.rows.push(newEvent);
}

this.Model = new ViewModel();
this.getEvents();
ko.applyBindings(this.Model);

//The HTML code just makes the table, the headers and the style of the table and I then use 
//data-bind to bind the info in the server into the appropriate block in the table.  
//And yes, I do use <script src="knockout.js"> and for all other js files I have in the
//HTML file.

The HTML is basically this:

title
meta
scripts
table style
table
headers <tr><td>Column1Header</td><td>Column2Header</td>.....</tr>
table body
    Example line from table's body: <td><input data-bind = "value: column1" /><td>
    buttons (for adding a row and another button for sorting the array)

 //I think it would be better to get rid of the sorting button and make it so if you click on 
//the table headers, you'll sort the table according to that header's column's information.  

==============================================================================
EDIT2:

Got the sort error corrected, I accidently forgot to rename one of the copied sort functions so it was causing a conflict. I still haven’t been able to figure out how to get the table to return to its original order. If someone can look at the sorting function I made and show me what I need to do or change it would be greatly appreciated.

I also haven’t been able to get the remove function to work correctly. It’s causing a conflict somehow as when I include it in the table, the data from the server isn’t populating the table.

EDIT:
I managed to figure out a “quick and dirty” way to get a sorting for an individual column. It goes something like this:

//After the line: self.rows = ko.observableArray([]); I continued with:
self.sortColumn = "Column1";
self.sortAscending = true;

self.SortColumn1 = function (){
    if(self.sortColumn == "Column1")
        self.sortAscending = !self.sortAscending;
    else{
        self.sortColumn = "Column1";
        self.sortAscending = true;
    }
    self.rows.sort(function(a,b){
        if(self.sortAscending == true)
            return a.Column1 < b.Column1 ? -1 : 1;
        else
            return a.Column1 > b.Column1 ? -1 : 1;
    });
}

However, if I copied this code for all the other columns (changing all the Column1’s into Column2’s and 3’s and so on for each different copy of the function); some rows aren’t sorted correctly. However if I keep just this one function without any copies towards the other columns, it works fine.

**I also need the ability to return the table to its original order. Right now I have this one function binded to the Column1 header in the table. If I click once, it puts it in descending order, and if I click the header again; it puts the table in ascending order (according to Column1’s information of course). Now the problem is to make it where if I click a third time, it restores the table to its default (original) order.

Answer 1

I solved it!! Due to the date being already in UTC, I was doing some needless conversions that were creating some conflicts/weird results. This question is to be considered SOLVED. Thank you everyone who helped.