Почему datatable добавляет новые записи и сохраняет старые?

Question

Я использую датируемый плагин для jquery.Когда вы загружаете страницу, таблица данных пуста.После того, как пользователь нажимает на определенную кнопку, он создает запрос 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)).Но все еще сохраняя старые записи в 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