Question

如何通过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);

            });
        }

    });
}

我改变QueryType，SDay，EDay条件后重新排序数据，我调用函数getData（）。我只想重新加载'下一个数据'，我不再需要第一个数据了。

Answer 1

您没有删除之前的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。最后一个循环值将分配给所有其他循环数据，因为数据是通过引用传递的。为了清楚了解此循环问题，我建议您先看一下 The Infamous Loop Problem ，然后导航到他解释循环问题的部分。

Answer 2

我希望这可能有用！

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

        });
    }

});
}

Answer 3

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

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

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

3 个答案: