創建HTML刷新按鈕，只刷新網頁上的HTML表中的信息

Question

---

更新：對不起，忘了包括一些代碼（面掌）。我將它包含在提供的初始代碼中，所以一切都將清晰。我對這個東西真的很陌生，所以請原諒我沒有時間學習jsfiddle（我知道它是什麼，但是我知道它是什麼）。

我已經想出了每次表更新時切換排序的問題。我放入代碼中的sort（）函數是新的，並調用method.sorting（）; getEvents（方法）函數內部解決了這個問題。不過，我仍然堅持刷新按鈕的概念。

我注意到的另一個問題並沒有解決如何解決的問題是，當我加載頁面時，我必須等待第一個setInterval開始，直到表填充。我如何解決這個問題，以便在頁面最初加載時立即加載數據，而無需在setInterval內等待指定的時間？

最後一個問題：當表自動更新時，使用addRow（）函數添加的任何行都消失了，因爲它們不是來自服務器的信息的一部分（並且不是，我不能擁有行被填充到服務器）;我怎樣才能使自動更新離開添加的行，而不必將添加的行更新到服務器？

---

我有一個使用knockoutjs到數據到柱動態地從使用$.getJSON(http://.....)方法的服務器綁定一個HTML表格。我希望能夠創建一個刷新按鈕刷新/更新表 - 只有表（I.E.不刷新整個頁面）。

現在，該表使用js文件底部的setInterval()函數進行更新，但不斷切換列分類。我無法弄清楚如何阻止這一點。

這裏是需要這樣的代碼片段：

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, valueUpdate: 'change' " /></td> 
    </tbody> 
</table> 
<div> 
    <button date-bind="click: addRow, enable: rows()">Add Row</button> 
</div> 
<script src="TableViewModel.js" type="text/javascript"></script> 

---

繼承人的JavaScript的視圖模型文件：

---

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

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

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

    self.SortByTimeObserved(){ 
     if(self.sortColumn == "TimeObserved") 
      self.sortAscending = !self.sortAscending; 
     else{ 
      self.sortColumn = "TimeObserved"; 
      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; 
     }); 
    } 
    self.sorting = function(){ 
     if(self.sortColumn() = "TimeObserved"){ 
      self.rows.sort(function(a,b){ 
       if(self.sortAscending() == true) 
        for(self.TimeObserved in self.rows) 
        return a.TimeObserved > b.TimeObserved ? 1 : a.TimeObserved < b.TimeObserved ? -1 : 0; 
       else 
        return a.TimeObserved < b.TimeObserved ? 1 : a.TimeObserved > b.TimeObserved ? -1 : 0; 
      } 
     } 
} 
//Access the server and pulls the info from it. I also apply my sorting() method to initially sort the info here. 
function getEvents(model){ 
    $.getJSON("http://mywebpage.com", 
     function (data){ 
      model.rows([]); 
      $.each(data.d, function(i,item){ 
       hendleEvent(item) 
      }); 
      model.sorting(); 
     } 
    ); 
} 

//Populates the rows of the table with the info from the server I.E. item."infoIwant" 
function handleEvent(item){ 
    var newEvent = new Event(item.TimeObserved); 
    this.Model.rows.push(newEvent);  
} 

this.Model = new TableViewModel(); 
var eventInterval = setInterval(function(){ 
    getEvents(this.Model); 
    }, 5000); 
ko.applyBindings(this.Model); 

---

Answer 1

我通過動態更新表來解決它，而不必依靠它一個按鈕。信息應該只能讀取，因此編輯不是一個需要考慮的因素。我也以某種方式得到它不撤消當前激活的排序。

加入到這個視圖模型，我設置表給定的間隔時間後更新：

var eventInterval = setInterval(function(){ 
    getEvents(this.Model); 
), 5000); //<-- in milliseconds 

Answer 2

你應該看看淘汰賽映射撐着：

http://knockoutjs.com/documentation/plugins-mapping.html

- UPDATE

也看看了解MVVM模式

http://addyosmani.com/blog/understanding-mvvm-a-guide-for-javascript-developers/