Таблица очищается после взаимодействия с функциями Datatable

Question

Я пытался заполнить свою таблицу с помощью этого кода, и он работал нормально.

Проблема в том, что я пытаюсь отсортировать или выполнить поиск в таблице, используя функции данных, моя таблица очищается.

$('#ipcrTable').DataTable({
  responsive: true
});

function get_ipcr() {
  var userID = <?php echo $_SESSION['id']; ?>;

  $.ajax({
    type: "POST",
    url: "ipcr.php",

    dataType: "json",
    success: function(results) {
      $.each(results, function(i, val) {
        $('#ipcrTable tr:last').after('<tr> <td>' + val.dateCreated + '</td><td>' + val.details + '</td></tr>');
      });
    }
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ipcrTable">
  <thead>
    <tr>
      <th>Time Created</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody id="itBody">

  </tbody>
</table>

Я попытался заполнить таблицу путем жесткого кодирования данных в таблицу, и DataTable отлично работает. Я не уверен почему, но после использования поиска и других функций DataTable, он стирает данные, которые были напечатаны моей функцией get_ipcr ().

Answer 1

Datatables не знает об обновленном содержимом DOM, поэтому следует использовать методы API DataTables для обновления таблицы, используя row.add(), за которым следует draw() для перерисовки стол. Вот фрагмент, демонстрирующий:

var table = $('#ipcrTable').DataTable({
  responsive: true
});

function get_ipcr() {
  var results = [
    {"dateCreated" : "2018-08-29", "details" : "today!"},
    {"dateCreated" : "2018-07-04", "details" : "july 4th"},
    {"dateCreated" : "2019-03-20", "details" : "spring equinox"}
  ];
  $.each(results, function(i, val) {
    table.row.add([val.dateCreated,val.details]);
  });
  table.draw();
}

get_ipcr()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="ipcrTable">
  <thead>
    <tr>
      <th>Time Created</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody id="itBody">
  </tbody>
</table>

А вот как это может выглядеть в вашем собственном коде:

var table = $('#ipcrTable').DataTable({
    responsive: true
});

function get_ipcr() {
    var userID = <?php echo $_SESSION['id']; ?>;
    $.ajax({
        type: "POST",
        url: "ipcr.php",
        dataType: "json",
        success: function(results) {
            $.each(results, function(i, val) {
                table.row.add([val.dateCreated,val.details]);
            });
            table.draw(false);
        }
    });
}