DataTables jqueryプラグインが機能しない、空白のページが表示される

Question

Datatables jqueryプラグインを私のhtmlテーブルで実装しようとしていますが、運がありません。私は、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は