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

Question

如何通过ajax重新加载表数据。当 View 第一次加载时，我通过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);

            });
        }

    });
}

在更改 QueryType、SDay、EDay 条件以重新排序数据后，我调用函数 getData()。我只想重新加载“下一个数据”，我不再需要第一个数据。

Answer 1

您没有删除以前的tr，因此每次您只是将其附加到现有表中。您需要在附加新响应之前清除表内容。另外，由于您要维护第一个 tr 作为表中的表头(不确定为什么要这样做。您可以使用 thead 来实现此目的)，我们需要保留它，即:第一个 tr。因此，将此代码放入 ajax success 函数中 $(data).each 循环

之前

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

此外，在您的 success 函数中，您只需将创建的 td's 附加到现有的 tr 中，但实际上应该构建新的 tr's 并将其附加到 table 。让我指出这一点。所以你成功的最终代码应该如下所示..

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