Question

UPDATE: I would also like for ascending/descending arrow keys to appear appropriately next to the header that is clicked to show the current sorted order. I already made the images in paint and made sure they were like 12 x 10 pixels.

I have done a lot of searching and it seems that without downloading a file it can’t be done. I’d like to use the code I currently have to somehow intially have my HTML table sorted by a certain column’s values that are dynamically populated from a private server.

I am using Knockoutjs for all the data-bindings.

The sorting works fine when I click on the column’s header. It currently puts it in ascending/descending order every other click (click once: descending, click again: ascending, click again: descending……..). I want to get the table populated initially with the TimeObserved info already sorted in descending order with the code I already have (if possible). Any help is appreciated.

PLEASE NOTE: I am rather new to all this and I know from personnal experience that someone will probably ask to put it into jsfiddle. I’m not used to jsfiddle and am busy at work. Please understand that I don’t have the time right now to convert it into that kind of format and that the codes provided should be more than informative and organized to read and understand. Thank you.

Here’s the code snippets needed for this:

HTML file:

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<table border="6" id="widget"><thead>
    <tr>
        <th><a href=#" data-bind="click: SortByTimeObserved">TimeObserved</a></th>
    </tr></thead>

    <tbody data-bind="foreach: rows">
        <td><input data-bind="value: TimeObserved" /></td>
    </tbody>
</table>

<script src="TableViewModel.js" type="text/javascript"></script>

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Heres the javascript viewmodel file:

==================================================================================

function Event(TimeObserved){
    var self = this;
    self.TimeObserved = TimeObserved;
}

function TableViewModel(){
    var self = this;
    self.sortColumn = "TimeObserved";
    self.sortAscending = true;

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

this.Model = new TableViewModel;
ko.applyBindings(this.Model);

==================================================================================

Answer 1

I solved it. When I use:

function getEvents(){
    $.getJSON("http://.....",
        function (data){
            $.each(data.d, function (i, item){
                handleEvent(item)
            });
        Model.SortByTimeObserved(); // <----This is what solved the problem
        }
    );
 }

Adding the Model.SortByTimeObservable(); after I populate the handleEvent with the items from the server then orders the TimeObserved in the proper order. The this.Model.SortByTimeObserved(); at the end of the ViewModel.js file is not needed as it would only put everything in the opposite order.