有时 jQuery Datatable 工作，有时不是？答案

【问题标题】：Sometime the jQuery Datatable is working, sometimes it is not?有时 jQuery Datatable 工作，有时不是？
【发布时间】：2018-03-02 15:23:37
【问题描述】：

我在本地做了一个 web (angular 5) 页面主机，我使用 datatable(jquery) 在我的 html 表中添加了一些额外的功能（如排序、过滤、搜索等）。当我第一次尝试时，数据表按我的预期工作，但是当我重新加载页面时，它的 ui 也发生了变化，然后所有的数据表功能都不再工作了......它似乎是随机发生的。所以我清除了所有的cookie并禁止页面使用cookie，但结果还是一样。我还尝试使用控制台日志查看 $('#myTable').DataTable();当我重新加载页面时运行，它实际上在我每次重新加载页面时运行。我不知道这是哪里出错了。注意：我使用 localhost/3000 将我的页面重定向到 \books 页面。这是我的示例索引文件代码：

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>QnAlist</title>
  <base href="/">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">

  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

</head>
<body>

  <app-root></app-root>

  <script>
  $(document).ready(function () {
    $('#myTable').DataTable();
  });



</script>


</body>
</html>

这是我的书籍组件 html 代码：

<div class="container">
  <h1 style="text-align: center">QnA List</h1>




  <table  class="display" id = 'myTable' >
    <thead>
      <tr>
        <th> Question </th>
        <th> Answer </th>
        <th> Date </th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let book of books">
        <td>{{ book.question }}</td>
        <td>{{ book.answer }}</td>
        <td>{{ book.timestamp }}</td>
      </tr>
    </tbody>
  </table>

</div>

【问题讨论】：

您是否在控制台中看到任何异常？
不，我没有看到任何错误..

标签： jquery html datatables

【解决方案1】：

我想出了一种解决方法....我找不到答案，所以我只是停止使用 jquery 表，并使用 primeng 数据表。它按我的预期工作。

【讨论】：

【解决方案2】：

我的问题是数据表名称：this.dataTable = $ ('# dtData')。 id dtData 我在几个 html 组件中分配了它，我的解决方案是为每个组件的每个数据表命名：dtDataPerson、dtDataEmployee等。

【讨论】：