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内容，因此您应该使用DataTables api方法使用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);
        }
    });
}

与数据表功能交互后，表为空

1 个答案: