如何解决ASP.net MVC表排序器具有可单击的列标题,但没有排序
这是我第一次在此处发布问题,因此我将尽力让您掌握所有必要的信息。
我正在尝试使用tablesorter对我的表进行排序。这是有问题的代码:
change
现在我的桌子看起来像这样:
如您所见,我可以单击列标题,在这种情况下,单击了“目标”,但表并未对数据进行排序。
我在StackOverflow上搜索了多种不同的解决方案,但似乎没有任何效果。其中许多解决方案都涉及使用uitheme和zebra小部件配置tablesorter,但似乎每次从默认主题切换时,我都会完全失去表格格式。
(是的,当我尝试切换主题时,我的ASP项目中包含了必要的文件和参考。)
不好意思,我去了tablesorter的docs页面,并从演示中复制了他们的整个配置,以查看它是否可以工作,并且具有失去所有表格式的效果。
所以,我无法弄清楚我在这里想念的是什么,如果大家都可以帮助我解决这个问题,我将非常感激。我厌倦了搜寻。谢谢。我希望我提供了足够的信息。
解决方法
将tbody标记移到了将表填充到表的html声明的循环之外,并解决了该问题。
@model MyAspApp.Models.Jackets
@{
ViewBag.Title = "Index";
}
<h2>Roster</h2>
<head>
<meta name="viewport" content="width=device-width" />
<title>Multi-model view attempt</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="~/Content/theme.default.css">
<link rel="stylesheet" href="~/Content/jquery-ui.min.css">
<script type="text/javascript" src="~/Scripts/jquery-latest.min.js"></script>
<script src="~/Scripts/jquery-ui.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.tablesorter.widgets.js"></script>
</head>
@section scripts
{
@Scripts.Render("~/bundles/jquery.tablesorter")
<script type="text/javascript">
$(document).ready(function () {
$("#Skaters").tablesorter(getSkaters());
$("#Goalies").tablesorter(getGoalies());
});
</script>
}
<script>
function getSkaters() {
var allSkaters = @Html.Raw(Json.Encode(ViewBag.Skaters));
for (var i = 0; i < allSkaters.length; i++) {
$("#Skaters").append(
"<tr><td >" + allSkaters[i].First_Name + "</td>"
+ "<td>" + allSkaters[i].Last_Name + "</td>"
+ "<td>" + allSkaters[i].Number + "</td>"
+ "<td>" + allSkaters[i].Position + "</td>"
+ "<td>" + allSkaters[i].Goals + "</td>"
+ "<td>" + allSkaters[i].Assists + "</td>"
+ "<td>" + allSkaters[i].Points + "</td></tr>");
}
}
function getGoalies(){
var allGoalies = @Html.Raw(Json.Encode(ViewBag.Goalies));
for (var i = 0; i < allGoalies.length; i++){
$("#Goalies").append(
"<tr><td>"+allGoalies[i].First_Name+"</td>"
+"<td>"+allGoalies[i].Last_Name+"</td>"
+"<td>"+allGoalies[i].Number+"</td>"
+"<td>"+allGoalies[i].Wins+"</td>"
+"<td>"+allGoalies[i].Losses+"</td>"
+"<td>"+allGoalies[i].OTL+"</td>"
+"<td>"+allGoalies[i].Save_+"</td>"
+"<td>"+allGoalies[i].GAA+"</td> </tr>");
}
}
</script>
<body>
<h1>Skaters</h1>
<table id="Skaters" class="tablesorter">
<thead>
<tr>
<th> First Name </th>
<th> Last Name </th>
<th> Number </th>
<th> Position </th>
<th> Goals </th>
<th> Assists </th>
<th> Points </th>
</tr>
</thead>
<tbody></tbody>
</table>
<h2>Goalies</h2>
<table id="Goalies" class="tablesorter">
<thead>
<tr>
<th> First Name </th>
<th> Last Name </th>
<th> Number </th>
<th> Wins </th>
<th> Losses </th>
<th> OTL </th>
<th> Save% </th>
<th> GAA </th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。