javascript - 重新加载数据使数据堆栈和重复与.append - Jquery

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