Javascript 最初设置要排序的HTML列

更新：我还希望升序/降序箭头键适当地显示在单击以显示当前排序顺序的标题旁边。我已经用油漆做了图像，并确保它们像12 x 10像素

我做了很多搜索，似乎没有下载文件就无法完成。我想使用目前必须使用的代码，以某种方式将HTML表按某个列的值进行排序，该列的值是从私有服务器动态填充的

我对所有数据绑定都使用Knockoutjs

当我单击列的标题时，排序工作正常。当前，它每隔单击一次就将其按升序/降序排列（单击一次：降序，再次单击：升序，再次单击：降序……）。我想在表格中首先填充TimeObserved信息，这些信息已经按照我已有的代码降序排列（如果可能的话）。感谢您的帮助

请注意：我对所有这些都比较陌生，根据个人经验，我知道可能有人会要求将其放入JSFIDLE。我不习惯打瞌睡，工作很忙。请理解，我现在没有时间将其转换为那种格式，并且提供的代码应该不仅仅是信息性的，而且应该组织起来阅读和理解。多谢各位

以下是实现此功能所需的代码片段：

HTML文件：

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

<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>

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

<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>

以下是javascript viewmodel文件：

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

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);

功能事件（观察到的时间）{
var self=这个；
self.TimeObserved=TimeObserved；
}
函数TableViewModel（）{
var self=这个；
self.sortColumn=“TimeObserved”；
self.sortAscending=true；
self.SortByTimeObserved（）{
if（self.sortColumn==“TimeObserved”）
self.sortAscending=！self.sortAscending；
否则{
self.sortColumn=“TimeObservable”；
self.sortAscending=true；
}
self.rows.sort（函数（a，b）{
if（self.sortAscending==true）
for（self.time在self.rows中观察到）
返回a.TimeObserved>b.TimeObserved-1:1；
其他的
返回a.TimeObserved

---

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

你不能用一些脚本初始化它吗

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);

this.Model = new TableViewModel;
this.Model.sortAscending = false;
this.Model.SortByTimeObserved();
ko.applyBindings(this.Model);

---

请看一下Ko网格。我打赌它会给你你所需要的：

---

我解决了它。当我使用：

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

函数getEvents（）{ $.getJSON（“http://.....", 功能（数据）{ $.each（data.d，function（i，item）{ 扶手通风口（项目） });

---

Model.SortByTimeObserved（）；//不幸的是，我尝试过类似的方法，我甚至也按照你的建议做了，但仍然没有按顺序填充它们。我想知道我是否需要在HTML中的某个地方进行填充？…谢谢，我以前确实看过这一点，但其中的内容太多了，我无法理解如何浏览它并能够将其拼凑出来请记住，我是一个新手，一生中只上过一堂HTML/XML课。