如何通过 ajax 重新加载表数据

How to reload table data by ajax

本文关键字：加载 数据 何通过 ajax 新加载      更新时间：2023-09-26

如何通过 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，EDay条件后，我调用函数getData（）。我只想重新加载"下一个数据"，我不再需要第一个数据了。

您不会删除以前的tr's 因此，每次您只是将其附加到现有表中。在追加新响应之前，您需要清除表内容。另外，因为您正在维护第一个tr以充当表中的表标题（不确定为什么要这样做。您可以使用thead为此）我们需要保留它，即：第一个tr。因此，在 $(data).each 循环之前将此代码放在 ajax 成功函数中

$(".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。最后一个循环值将分配给所有其他循环数据，因为数据是通过引用传递的。为了清楚地了解这个循环问题是什么，我建议您查看这个臭名昭著的循环问题，导航到他解释循环问题的部分。

我希望

这可能有效！

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

在循环之前，您可以执行以下操作：

$('.oa-content-table').html("");
相关文章：