Question

我正在使用jquery的datatable插件。加载页面时，数据表为空。用户单击特定按钮后，它会生成一个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();以销毁旧版本，然后创建一个新版本。我甚至尝试使用一个删除给定父级（htmlChildsRemover(parent)）的html子级的函数来删除他的行。但仍保留旧数据的记录。

从每个请求返回的数据都很好，所以我认为它在datatable插件中保留了旧记录。

我可以解决这个问题吗？感谢。

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

为什么数据表正在添加新记录并保留旧记录？

1 个答案: