[英]Sorting and Paging Columns within a html table with jquery not working
我正在开发一个应用程序,在该应用程序中,我应该能够在ASP.NET MVC视图中单击列标题对表进行排序。 我有以下代码
1.指数
@{
Layout = null; }
<!DOCTYPE html>
<html>
<head>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.tablesorter.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#tablesorter").tablesorter();
} );
</script>
</head>
<body>
<div>
<table class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
<th>Phone</th>
<th>Date Added</th>
</tr>
</thead>
<tbody>
<tr>
<td>Daya</td>
<td>AB</td>
<td>123</td>
<td>Phone</td>
<td>DateAdded</td>
</tr>
<tr>
<td>da</td>
<td>AB</td>
<td>456</td>
<td>324</td>
<td>243</td>
</tr>
<tr>
<td>kasr</td>
<td>43</td>
<td>1tdf23</td>
<td>fhdf</td>
<td>jhrtj</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
<th>Phone</th>
<th>Date Added</th>
</tr>
</tfoot>
</table>
<div id="pager">
<form>
<img src="@Url.Content("~/Content/images/first.png")" class="first" />
<img src="@Url.Content("~/Content/images/prev.png")" class="prev" />
<input type="text" class="pagedisplay" />
<img src="@Url.Content("~/Content/images/next.png")" class="next" />
<img src="@Url.Content("~/Content/images/last.png")" class="last" />
<select class="pagesize">
<option selected="selected" value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</form>
</div>
</div>
</body>
</html>
> 2. CSS
body {
font-size: 75%;
font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
}
table { border-spacing:0; border:1px solid gray;}
table.tablesorter thead tr .header {
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(images/asc.png);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(images/desc.png);
}
table th { width:150px;
border:1px outset gray;
background-color:#3C78B5;
color:White;
cursor:pointer;
}
table thead th:hover { background-color:Yellow; color:Black;}
table td { width:150px; border:1px solid gray;}
当我运行上面的源代码时,它会显示包含所有相应CSS的表,但是当我点击它们时它永远不会对列进行排序。 在JavaScript控制台中,我收到的例外是
"Uncaught ReferenceError: jQuery is not defined" in jquery.tabelsorter.js
"Uncaught TypeError: Object [object Object] has no method 'tablesorter' " in Index(15)
我可以知道我在哪里犯了一个错误导致了这些例外
您的JS依赖包含不正常。 毫无疑问,jQuery需要加载jquery.tablesorter.js
,因此您需要先包含它。
正确的顺序:
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
编辑:此外,更改:
$("#tablesorter").tablesorter()
至:
$(".tablesorter").tablesorter();
您需要按所需元素的类选择,而不是id。
您必须在构建它的库之前包含jquery:
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.tablesorter.pager.js")" type="text/javascript"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.