javascript - 为什么数据表会添加新记录并保留旧记录？

Question

我正在使用 jquery 的数据表插件。当e加载页面时，数据表是空的。用户单击特定按钮后，它会生成一个从数据库返回数据的 XMLHttpRequest，然后我将该数据添加到数据表中(使用函数 drawDataTable)。如果我执行一个请求，一切都可以。

每次我执行另一个请求时，数据表都会保留旧的并添加新的。这会导致行具有重复的数据。

这是代码:

function drawDataTable(pData) {
    console.log("Call of drawDataTable!!!");

    //change display
    document.getElementById("dataTableCard").style.display = "block";

    //destroy old instatiated table and create a new one
/*    var dataTable = document.querySelector("#dataTable .tableBody");
    htmlChildsRemover(dataTable);*/

    var table = $('#dataTable').DataTable();
    table.destroy();
    var table = $('#dataTable').DataTable({
        "scrollY": "400px",
        "paging": false
    });

            var p1 = pData['p1'];
            var p2 = pData['p2'];
            var p3 = pData['p3'];
            var p4 = pData['p4'];
            var p5 = pData['p5'];
            var p6 = pData['p6'];

            //add rows
            $('#addRows').on('click', function() {
           
                    for (var idxT in p1) {

                        table.row.add([
                            p1[idxT],
                            p2[idxT],
                            p3[idxT],
                            p4[idxT],
                            p5[idxT],
                            p6[idxT]
                        ]).draw(false);

                    } //endFor

            });

            // Automatically add rows 
            $('#addRows').click();
            
} //drawDataTable

      <div class="card mb-3" id="dataTableCard">
        <div class="card-header"> <i class="fa fa-table"></i> Data Table Example</div>
        <div class="card-body">
<button id="addRows"></button><!-- Hidden button -->
          <div class="table-responsive">
            <table class="table table-bordered tableType1" id="dataTable" width="100%" cellspacing="0">
              <!-- This is a "base-skeleton for datatable" -->
              <thead>
                <tr class="tableHead">
                  <th class="head1">p1</th>
                  <th class="head2">p2</th>
                  <th class="head3">p3</th>
                  <th class="head4">p4</th>
                  <th class="head5">p5</th>
                  <th class="head6">p6</th>
                </tr>
              </thead>
              <tfoot>
                <tr>
                  <th class="foot1">p1</th>
                  <th class="foot2">p2</th>
                  <th class="foot3">p3</th>
                  <th class="foot4">p4</th>
                  <th class="foot5">p5</th>
                  <th class="foot6">p6</th>
                </tr>
              </tfoot>
              <tbody class="tableBody"> </tbody>
            </table>
          </div>
         </div>
        </div>

注意:我添加了 table.destroy(); 来销毁旧表，然后创建一个新表。我什至尝试使用删除给定父级的 html 子级的函数 (htmlChildsRemover(parent)) 来删除他的行。但仍保留数据表中的旧记录。

从每个请求返回的数据都很好，所以我认为数据表插件中的某些内容保留了旧记录。

我该如何解决这个问题？谢谢。

Answer 1

我认为您必须在添加行之前添加table.clear():

table.clear(); <<<<<here
for (var idxT in p1) {
                table.row.add([
                    p1[idxT],
                    p2[idxT],
                    p3[idxT],
                    p4[idxT],
                    p5[idxT],
                    p6[idxT]
                ]).draw(false);

            } //endFor