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