如何通過ajax重新加載表數據

如何通過ajax重新加載表數據。當視圖第一次加載時，我通過ajax獲取表數據。當我改變一些重新排序數據的條件時，它無法重新加載數據。第一個數據依然存在，並添加下一個數據。如何通過ajax重新加載表數據

查看

<table class="oa-content-table"> 
    <tr> 
     <td>     
      <div class="total">Index</div> 
      <div class="title">Name</div> 
     </td>    
    </tr> 
</table>

腳本

<script type="text/javascript"> 

getData() 

function getData(){ 

    $.ajax({ 
     url: '@Url.Action("JsonGetBillFactoryCost", "Bill")', 
     data: { 
      QueryType: $('#divQueryType_BFC').data('kendoDropDownList').value(), 
      SDay: $('#divSDay_BFC').val(), 
      EDay: $('#divEDay_BFC').val() 
     }, 
     type: 'GET', 
     dataType: 'JSON', 
     success: function (data) { 

      $(data).each(function() { 

       var element = document.createElement('tr'); 
       $(element).data('dataItem', this); 

       var html = '<td>' + 
          '<div class="content">' + this.Index+ '</div>' + 
          '<div class="total">' + this.Name + '</div>' + 
          '</td>'; 

       $(element).html(html); 
       $('.oa-content-table tr').append(html); 

      }); 
     } 

    }); 
}

更改查詢類型，SDAY，重新排序數據伊戴條件後，我打電話功能的getData（）。我只想重新加載'下一個數據'，我不再需要第一個數據。

來源

2016-03-15 Heejeong Im

我看到你正在使用'Kendo'，你爲什麼不使用Kendo網格？ –

我通常使用Kendogrid，當表格形狀爲行時。但是這個例子的表格形狀是用於列的。我的意思是，我想以列的形狀添加模型數據。是否有可能通過使用Kendogrid？... –

hmmm如果您使用MVC版本語法來構建網格，它將變得複雜，因爲它需要您在編譯期間指定結構。但使用Kendo網格的jquery版本可能對你有用。 –

你是不是刪除以前tr's所以每次你只是將其追加到現有的表。您需要在添加新回覆之前清除表格內容。此外，由於您維護第一個tr作爲表格中的表頭（不確定爲什麼您需要這種方式，因此您可以使用thead）我們需要保留它，即：first tr。所以放在你的Ajax成功功能這段代碼$(data).each環

$(".oa-content-table tr:gt(0)").remove();

而且你的成功函數中你只是追加創建td's到現有tr之前，但實際上應該建立新的tr's並追加到表。讓我指出。因此，您成功的最終代碼應如下所示。

success: function (data) { 

     $(".oa-content-table tr:gt(0)").remove(); //remove all the tr's except first ,As you are using it as table headers.    

     $(data).each(function() { 

     return function(){ //to overcome the loop issue. 
       var element = document.createElement('tr'); 
       $(element).data('dataItem', this); 

       var html = '<td>' + 
          '<div class="content">' + this.Index+ '</div>' + 
          '<div class="total">' + this.Name + '</div>' + 
          '</td>'; 

       $(element).html(html); 
       $('.oa-content-table tr').append($(element)); //append your new tr 
      }     
     }); 
    }

讓我知道這是否有幫助。

更新1：根據您的意見數據重複多個記錄，這是jQuery中的Infamous loop issue。最後一個循環值將被分配給所有其他循環數據，因爲數據是經過參考的。爲了清楚瞭解這個循環問題，我建議你看看這個The Infamous Loop Problem導航到他解釋循環問題的部分。

來源

2016-03-15 03:08:47

非常感謝你，祝你有美好的一天！：） –

我認爲它解決了我的專業，但它無法解決我的問題。當模型數據是兩個或更多時，最後的模型數據顯示兩次。 –

@heejeongim我解決了這個問題。使用我更新的答案，還需要一些時間來獲得有關jQuery中面臨的循環問題的知識。我給了一個有用的鏈接。 –

我希望這可以工作！

function getData(){ 
$.ajax({ 
    url: '@Url.Action("JsonGetBillFactoryCost", "Bill")', 
    data: { 
     QueryType: $('#divQueryType_BFC').data('kendoDropDownList').value(), 
     SDay: $('#divSDay_BFC').val(), 
     EDay: $('#divEDay_BFC').val() 
    }, 
    type: 'GET', 
    dataType: 'JSON', 
    success: function (data) { 

     $(data).each(function() { 

      var element = document.createElement('tr'); 
      $(element).data('dataItem', this); 

      var html = '<td>' + 
         '<div class="content">' + this.Index+ '</div>' + 
         '<div class="total">' + this.Name + '</div>' + 
         '</td>'; 

      $(element).html(html); 
      $('.oa-content-table').empty(); 
      $('.oa-content-table tr').append(html); 

     }); 
    } 

}); 
}

來源

2016-03-15 02:52:38

循環之前，你可以做這樣的事情：

$('.oa-content-table').html("");

來源

2016-03-15 02:55:06

如何通過ajax重新加載表數據

回答

相關問題