2016-12-30 2 views
0

Ich versuche, das DataTable-Plugin zu verwenden, um Funktionalität zu meiner HTML-Tabelle hinzuzufügen. Ich habe die Schritte zur Installation und Initialisierung von datatables.net ausgeführt, aber es fügt meiner HTML-Seite keine Funktionalität hinzu. Ich frage mich, ob dies daran liegt, dass meine Tabelle so formatiert ist, dass sie vom Plug-in nicht unterstützt wird.Jquery Datatable Plugin arbeitet nicht auf HTML-Tabelle

<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> 

Antwort

0

Ihr Problem ist, dass Sie die dataTable.js vor jQuery geladen werden. (Können Sie das Problem in der webconsole Ihres Browsers sehen (in der Regel, wenn F12 eingeben) jQuery Laden, bevor Ihr Problem lösen.

<!-- 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> 
Verwandte Themen