jQuery 如何启用 Bootstrap 表分页和搜索？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37259682/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to enable Bootstrap table pagination and search?
提问by Brian J
I've been following twoguides on adding pagination to a Bootstrap table, but when I add the required links and scripts, the pagination or search doesn't render on the bootstrap table.
我一直在遵循两个关于将分页添加到 Bootstrap 表的指南，但是当我添加所需的链接和脚本时，分页或搜索不会在引导表上呈现。
I tried placing the jQuery reference at the start of the head tag as this solution suggested, but it made no difference.
我尝试按照此解决方案的建议将 jQuery 引用放在 head 标记的开头，但没有任何区别。
I'm sure this is just a mismatch in the ordering of the external library cdn references but I'm not sure of the correct order.
我确定这只是外部库 cdn 引用的顺序不匹配，但我不确定正确的顺序。
I also checked that the script references the correct table, which it does - "escalation"
我还检查了脚本引用了正确的表，它确实 - “升级”
Question:
题：
How can I organize jqueryand bootstrapreferences to show table paging?
如何组织jquery和bootstrap引用以显示表格分页？
Markup:(gist of the view's markup)
标记：（视图标记的要点）
<!DOCTYPE html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container body-content">
<div class="page-header">
<label class="heading">History</label>
<div class="form-group">
<fieldset>
<form action="" class="form-group" method="post">
<div class="table-responsive">
<div class="table-responsive">
<table id="escalation" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Application</th>
<th>EMOPOP</th>
<th>Stats</th>
<th>Statement</th>
<th>Time</th>
<th>Updated</th>
<th>Details</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>0,800</td>
<td>2011/04/25</td>
<td>0,800</td>
</tr>
</tbody>
</table>
</div>
</div>
</form> <!--END OF FORM ^^-->
</fieldset>
</div>
<hr />
</div>
</div>
</body>
<script>
$(document).ready(function () {
$('#escalation').dataTable();
});
</script>
采纳答案by Brian J
The answer in case anyone else has a similar problem, the references were held in my layout page. This meant that the references in the view containing the table had no effect.
万一其他人有类似问题的答案，参考资料保存在我的布局页面中。这意味着包含该表的视图中的引用无效。
I updated the references in layout.cshtml to jquery 1.9+and also had to comment out the following which prevented the scripts from rendering:
我将 layout.cshtml 中的引用更新为，jquery 1.9+并且还必须注释掉以下阻止脚本呈现的内容：
//commented out
//@Scripts.Render("~/bundles/jquery")
//@RenderSection("scripts", required: false)
This was suggested in a similar question here:
这是在一个类似的问题中提出的：
MVC 4 Razor Object doesn't support property or method 'dataTable'
回答by SaiKiran
This code runs perfectly fine ,just test using the snipped below
这段代码运行得很好，只需使用下面的代码进行测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Final Output</title>
<meta name="description" content="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</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> 回答by Felippe Duarte
It's working here:
它在这里工作：
https://jsfiddle.net/bu4r2od4/
https://jsfiddle.net/bu4r2od4/
you need to use jQuery 1.9+
你需要使用 jQuery 1.9+
and use this:
并使用这个：
$(document).ready(function () {
$('#escalation').DataTable();
});
