2016-12-30 16 views
0

DataTableプラグインを使用してhtmlテーブルに機能を追加しようとしています。私はdatatables.netからのインストールと初期化の手順を踏んだが、私のHTMLページには何の機能も追加していない。私のテーブルがプラグインでサポートされていない方法でフォーマットされているため、それが問題なのかどうか疑問に思っています。JQuery Datatableプラグインがhtmlテーブルで動作しない

<html> 
<head> 
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script> 
     $(document).ready(function() { 
     $('#example').DataTable(); 
     } 
     ); 
    </script> 
</head> 
<body> 
<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 
     <tbody> 
      <tr> 
       <td>Tiger Nixon</td> 
       <td>System Architect</td> 
       <td>Edinburgh</td> 
       <td>61</td> 
       <td>2011/04/25</td> 
       <td>$320,800</td> 
      </tr> 
      <tr> 
       <td>Garrett Winters</td> 
       <td>Accountant</td> 
       <td>Tokyo</td> 
       <td>63</td> 
       <td>2011/07/25</td> 
       <td>$170,750</td> 
      </tr> 
      <tr> 
       <td>Michael Bruce</td> 
       <td>Javascript Developer</td> 
       <td>Singapore</td> 
       <td>29</td> 
       <td>2011/06/27</td> 
       <td>$183,000</td> 
      </tr> 
      <tr> 
       <td>Donna Snider</td> 
       <td>Customer Support</td> 
       <td>New York</td> 
       <td>27</td> 
       <td>2011/01/25</td> 
       <td>$112,000</td> 
      </tr> 
     </tbody> 
    </table> 
    </body> 
    </html> 

答えて

0

あなたの問題は、あなたが jQueryの前にdataTable.js をロードしているということです。 。(あなたはあなたの問題を解決する前にjQueryをロードする(通常は、F12を入力するとき)は、ブラウザのWebConsoleに問題を見ることができます:

<!-- first jQuery --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<!-- then dataTables --> 
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /> 

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
    <script> 
     $(document).ready(function() { 
     $('#example').DataTable(); 
     } 
     ); 
    </script> 
関連する問題