DataTables jquery 插件不工作，得到一个空白页？

Question

我正在尝试使用我的 html 表实现 Datatables jquery 插件，但没有运气。我为 CSS 样式和 Datatables 脚本本身链接到 Datatables CDN，同时链接到 Google 托管的 jquery 插件。我还有一个本地 Javascript 文件，其中包含用于初始化我的表上的数据表的脚本。我去打开 html 页面，然后得到我的普通表，好像 DataTable 甚至没有运行一样。我可能做错了什么？

<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatables.js"></script>

<table id="mytable">
<table>
  <thead>
    <tr>
      <th>High-Level Category</th>
      <th>Device Type</th>
      <th>Hostname</th>
      <th>IP Address</th>
      <th>Owner</th>
      <th>Organizational Unit</th>
      <th>Organizational Unit Email</th>
      <th>Universal Forwarder or Syslog?</th>
      <th>In PCI?</th>
      <th>Notes</th>
    </tr>
  </thead>
<tbody contenteditable>
    <tr>
      <td contenteditable="true">SECDEV1</td>
      <td contenteditable="true">Firewall</td>
      <td contenteditable="true">Description 1</td>
      <td contenteditable="true">1.1.1.1</td>
      <td contenteditable="true">Kim</td>
      <td contenteditable="true">Information Technology</td>
      <td contenteditable="true">test@test.com</td>
      <td contenteditable="true">Syslog</td>
      <td contenteditable="true">Yes</td>
      <td contenteditable="true">notes</td>
    </tr>
    <tr>
      <td contenteditable="true">SECDEV2</td>
      <td contenteditable="true">Switch</td>
      <td contenteditable="true">description2</td>
      <td contenteditable="true">2.2.2.2</td>
      <td contenteditable="true">Bob</td>
      <td contenteditable="true">Information Networking</td>
      <td contenteditable="true">test2@test.com</td>
      <td contenteditable="true">Syslog</td>
      <td contenteditable="true">NO</td>
      <td contenteditable="true">more notes</td>
    </tr>
</tbody>

我的本​​地js文件如下：

$(document).ready(function(){

    $('#mytable').dataTable();

});

任何帮助都会很棒。

谢谢！

Answer 1

您的 html 代码不正确。有一个额外的开放式结尾表格标记。我在下面更正了您的 html：

<table id="mytable">
      <thead>
        <tr>
          <th>High-Level Category</th>
          <th>Device Type</th>
          <th>Hostname</th>
          <th>IP Address</th>
          <th>Owner</th>
          <th>Organizational Unit</th>
          <th>Organizational Unit Email</th>
          <th>Universal Forwarder or Syslog?</th>
          <th>In PCI?</th>
          <th>Notes</th>
        </tr>
      </thead>
        <tbody contenteditable>
            <tr>
              <td contenteditable="true">SECDEV1</td>
              <td contenteditable="true">Firewall</td>
              <td contenteditable="true">Description 1</td>
              <td contenteditable="true">1.1.1.1</td>
              <td contenteditable="true">Kim</td>
              <td contenteditable="true">Information Technology</td>
              <td contenteditable="true">test@test.com</td>
              <td contenteditable="true">Syslog</td>
              <td contenteditable="true">Yes</td>
              <td contenteditable="true">notes</td>
            </tr>
            <tr>
              <td contenteditable="true">SECDEV2</td>
              <td contenteditable="true">Switch</td>
              <td contenteditable="true">description2</td>
              <td contenteditable="true">2.2.2.2</td>
              <td contenteditable="true">Bob</td>
              <td contenteditable="true">Information Networking</td>
              <td contenteditable="true">test2@test.com</td>
              <td contenteditable="true">Syslog</td>
              <td contenteditable="true">NO</td>
              <td contenteditable="true">more notes</td>
            </tr>
        </tbody>
    </table>

Answer 2

要达到您的预期结果，请使用以下 CDN 库

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

Codepen-http://codepen.io/nagasai/pen/AXyLXO