2014-09-07 23 views
1

我在我的项目中使用了JQUERY DATATABLES。我已经添加了所有参考资料,并遵循了文档中指定的所有步骤。但我无法看到分页。我可以看到表格排序,但我可以看到分页数。我觉得它选错了jquery库。我怎么知道它指的是哪个jQuery?在jQuery数据表中没有显示分页

enter image description here

我下面引用我的项目的数据表。

<script src="~/Scripts/jquery.js"></script> 
<script src="~/Scripts/jquery.dataTables.js"></script> 
<link href="~/Content/jquery.dataTables.css" rel="stylesheet" /> 

我有如下表数据

<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 

     </tr> 
    </thead> 

    <tfoot> 
     <tr> 
      <th>Name</th> 
      <th>Position</th> 
      <th>Office</th> 

     </tr> 
    </tfoot> 

    <tbody> 
     <tr> 
      <td>Tiger Nixon</td> 
      <td>System Architect</td> 
      <td>Edinburgh</td> 

     </tr> 
     <tr> 
      <td>Garrett Winters</td> 
      <td>Accountant</td> 
      <td>Tokyo</td> 

     </tr> 
     <tr> 
      <td>Ashton Cox</td> 
      <td>Junior Technical Author</td> 
      <td>San Francisco</td> 

     </tr> 
     <tr> 
      <td>Cedric Kelly</td> 
      <td>Senior Javascript Developer</td> 
      <td>Edinburgh</td> 

     </tr> 
     <tr> 
      <td>Airi Satou</td> 
      <td>Accountant</td> 
      <td>Tokyo</td> 

     </tr> 

    </tbody> 
</table> 

我这里渲染数据表

<script type="text/javascript"> 

    $(function() { 

     var localTable =$('#example').dataTable({ 
      "bProcessing": true, 
      "iDisplayLength": 5, 
      "bPaginate": true, 
      "sPaginationType": "full_numbers" 

     }); 

    }); 
</script> 
+0

检查语法这里HTTP://www.datatables .NET /为例es/basic_init/alt_pagination.html – Athiruban

+1

你试过看这个吗? http://stackoverflow.com/questions/25200305/jquery-datatable-pagination-not-appearing –

+0

你正在使用哪个jQuery版本? – chridam

回答

0

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Example of Employee Table with twitter bootstrap</title> 
 
<meta name="description" content="Creating a Employee table with Twitter Bootstrap. Learn with example of a Employee Table with Twitter Bootstrap."> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style> 
 
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> 
 
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
</head> 
 
<body style="margin:20px auto"> 
 
<div class="container"> 
 
<div class="row header" style="text-align:center;color:green"> 
 
<h3>Bootstrap Table With sorting,searching and paging using dataTable.js (Responsive)</h3> 
 
</div> 
 
<table id="myTable" class="table table-striped" > 
 
     <thead> 
 
      <tr> 
 
      <th>ENO</th> 
 
      <th>EMPName</th> 
 
      <th>Country</th> 
 
      <th>Salary</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td>001</td> 
 
      <td>Anusha</td> 
 
      <td>India</td> 
 
      <td>10000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>002</td> 
 
      <td>Charles</td> 
 
      <td>United Kingdom</td> 
 
      <td>28000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>003</td> 
 
      <td>Sravani</td> 
 
      <td>Australia</td> 
 
      <td>7000</td> 
 
      </tr> 
 
\t \t <tr> 
 
      <td>004</td> 
 
      <td>Amar</td> 
 
      <td>India</td> 
 
      <td>18000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>005</td> 
 
      <td>Lakshmi</td> 
 
      <td>India</td> 
 
      <td>12000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>006</td> 
 
      <td>James</td> 
 
      <td>Canada</td> 
 
      <td>50000</td> 
 
      </tr> 
 
\t \t 
 
\t \t <tr> 
 
      <td>007</td> 
 
      <td>Ronald</td> 
 
      <td>US</td> 
 
      <td>75000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>008</td> 
 
      <td>Mike</td> 
 
      <td>Belgium</td> 
 
      <td>100000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>009</td> 
 
      <td>Andrew</td> 
 
      <td>Argentina</td> 
 
      <td>45000</td> 
 
      </tr> 
 
\t \t 
 
\t \t  <tr> 
 
      <td>010</td> 
 
      <td>Stephen</td> 
 
      <td>Austria</td> 
 
      <td>30000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>011</td> 
 
      <td>Sara</td> 
 
      <td>China</td> 
 
      <td>750000</td> 
 
      </tr> 
 
      <tr> 
 
      <td>012</td> 
 
      <td>JonRoot</td> 
 
      <td>Argentina</td> 
 
      <td>65000</td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
\t </div> 
 
</body> 
 
<script> 
 
$(document).ready(function(){ 
 
    $('#myTable').dataTable(); 
 
}); 
 
</script> 
 
</html>