我一直遵循有关向Bootstrap表添加分页的两个指南,但是当我添加所需的链接和脚本时,分页或搜索不会在bootstrap表上呈现。
我尝试按照此解决方案的建议将jQuery引用放在head标签的开头,但这没什么区别。
我确定这只是外部库cdn引用的顺序不匹配,但我不确定正确的顺序。
我还检查了脚本是否引用了正确的表,即“升级”
问题:
如何组织jquery
和bootstrap
引用以显示表分页?
标记:(视图标记的要点)
<!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>$320,800</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
</div>
</div>
</form> <!--END OF FORM ^^-->
</fieldset>
</div>
<hr />
</div>
</div>
</body>
<script>
$(document).ready(function () {
$('#escalation').dataTable();
});
</script>
万一其他人有类似问题,答案将保留在我的布局页面中。这意味着包含表的视图中的引用无效。
我将layout.cshtml中的引用更新为,jquery 1.9+
并且还必须注释掉以下阻止脚本呈现的内容:
//commented out
//@Scripts.Render("~/bundles/jquery")
//@RenderSection("scripts", required: false)
这是在类似的问题中提出的:
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句