如何通过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重新加载表数据

回答

相关问题