如何添加jQuery數據庫插件？

Question

我搜索了DataTables，發現有些代碼要添加dataTable，但實際上不工作是他們添加JQuery Datatable Plugin的任何不同方式？

我添加了cdn如下頭內標籤。我的代碼如下：

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

我的表：

<table id="example"> 
    <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> 
    </tbody> 
</table> 
       ` 

和jQuery：

<script> 
$(document).ready(function(){ 
    $('#example').DataTable(); 
}); 
</script> 

Answer 1

你應該添加

https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js 

代替你添加CSS兩次

請閱讀文檔

除了上面的代碼，下面的JavaScript庫文件加載用於本示例中：

code.jquery.com/jquery-1.12.3.js

https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js

$(document).ready(function() { 
 
    $('#example').DataTable(); 
 
});

<link rel="stylesheet" href="http://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<script src="http://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
<table id="example" class="display"> 
 
    <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> 
 
    </tbody> 
 
</table>

Answer 2

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

你已經錯過了DataTable的js文件，你需要添加：

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