最初に並べ替えるHTML列を設定します

Question

UPDATE：現在のソート順を表示するためにクリックされたヘッダーの横に昇順/降順の矢印キーが適切に表示されるようにしたいと思います。私はすでに絵を描き、12 x 10ピクセルのようにしていました。

私は多くの検索を行いましたが、ファイルをダウンロードせずにできないようです。私は現在、私のHTMLテーブルをプライベートサーバから動的に取り込まれた特定のカラムの値で並べ替えるために、私が現在持っているコードを使用したいと思います。

私はすべてのデータバインディングにKnockoutjsを使用しています。

列のヘッダーをクリックすると並べ替えが正常に機能します。現在、クリックごとに昇順/降順で表示されます（一度クリック：降順、再度クリック：昇順、もう一度クリック：降順........）。私は既にテーブルを取得する必要がありますが、私はすでに（可能であれば）コードを持つ降順でソートされているTimeObserved情報で最初に。どんな助けもありがとうございます。

ご注意：私はこれよりもむしろ新しく、人の経験から、誰かがおそらくそれをjsfiddleに入れるように頼んでいることを知っています。私はjsfiddleに慣れておらず、仕事で忙しいです。このような形式に変換する時間がないこと、提供されたコードが読みやすく理解できるように情報を提供し、組織化されている必要があることを理解してください。ありがとうございました。

ここでは、このために必要なコードスニペットです：

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> 

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

相続人の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); 

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

Answer 1

私はそれを解決しました。私が使用している場合：

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

を、私は、サーバーからのアイテムとのhandleEventを移入した後the Model.SortByTimeObservable();を追加し、その後適切な順序でTimeObservedを注文。 ViewModel.jsファイルの末尾にあるthis.Model.SortByTimeObserved();は、すべてが逆の順序になるため、必要ありません。

Answer 2

ちょっとしたスクリプトで初期化できませんでしたか？

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

Answer 3

Ko Gridを見てください。私はそれはあなたが必要なものを与える賭け：

https://github.com/ericmbarnard/KoGrid