jquery - jQuery 数据表中未显示分页

标签 jquery datatables

我在我的项目中使用 JQUERY DATATABLES。我已添加所有引用并遵循文档中指定的所有步骤。但我看不到分页。我可以看到表格排序,但我可以看到分页编号。我觉得它选择了错误的 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>

最佳答案

<!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>  
		   <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>  
		  
		   <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>  
		  
		    <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>  
	  </div>
</body>  
<script>
$(document).ready(function(){
    $('#myTable').dataTable();
});
</script>
</html>  

关于jquery - jQuery 数据表中未显示分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25710047/

相关文章:

jquery - 如果按钮已经在处理当前请求,如何阻止按钮上的单击事件

ajax - 如何使用 Angular 方式示例在 Angular DataTables 中使用服务器端选项?

javascript - Visual Studio cordova s​​ql server 教程

jquery - 如何在jsfiddle中加载和使用XML

php - 如何使用数据表从 Ajax 向 PHP 传递和获取数据

Shiny 中的 R 大型数据表显示

javascript - 如何通过可点击的列在同一页面中搜索值

javascript - 选择所有复选框在 JQuery 数据表的下一页上不起作用

javascript - 如何动态分组每个 n-div 并在 JQuery 中用一个新的 div 包装?

jquery - $.getJSON 返回 “undefined” 或 [object Object] [object Object]