Question

我有一个用ajax动态提供的表，并使用Jquery将数据附加到我的表中。到目前为止，这工作正常但是当我尝试重新加载数据时，它只是堆积数据。

以下是我到目前为止所做的功能，并且在最初加载页面时效果很好。

loadIncidents: function () {
    $.ajax({
        url: this.basePath() + '/GDI_PROD_Incidents?$filter=ÉtatValue%20ne%20%27Fermé%27&$orderby=PrioritéValue desc',
        dataType: 'json',
        cache: false,
        success: function (data) {

            $.each(data.d.results, function (index, incident) {

            $('#example').append(
            "<tr>" +
            "<td> <button class='edit_button btn btn-info btn-circle btn-xs' name ='btnSubmit' type='button' value='Edit' data-ID='"+incident.ID+"'><i class='glyphicon glyphicon-edit' data-original-title='' title=''></i></button></td>" +
            "<td>" + incident.Incident + "</td>" +
            "<td>" + incident.PrioritéValue + "</td>" +
            "<td>" + incident.Composante + "</td>" +
            "<td>" + incident.Description + "</td>" +
            "<td>" + incident.DateDeDébut + "</td>" +
            "<td>" + incident.DateDeFin + "</td>" +
            "</tr>");                   

            })
        }
    });
},

然后我创建了这个刷新函数，基本上是在执行某些操作后刷新数据。它似乎工作，但不是重新加载我的表与更新的记录列表，它只是堆叠我的数据。

// Refreshes the search result.
refreshInicidents: function () {
    this.loadIncidents();
},

这是我的HTML代码：

            <table class="table table-bordered table-hover" id="example">
                <thead>
                    <tr>
                        <th>Action</th>
                        <th>Incident</th>
                        <th>Priorité</th>
                        <th>Composante</th>
                        <th>Description</th>
                        <th>Date de début</th>
                        <th>Date de fin</th>
                    </tr>
                </thead>
            </table>

我正在查看Jquery文档并尝试.html但这似乎打破了表格。寻找一些关于最佳方法的建议。任何反馈都表示赞赏。

Answer 1

一个选项是清空父HTML元素，在这种情况下可能是<tbody>。

在您的代码中，您的成功函数可以首先执行此操作：

success: function (data) {
    $('tbody').empty();
    ...

这将首先清除可能已存在的所有数据，然后立即继续使用其他代码并附加新数据！

.empty()

重新加载数据使用.append进行数据堆栈和重复 - Jquery

1 个答案: