ASP.net MVC表排序器具有可单击的列标题，但没有排序

问题描述

这是我第一次在此处发布问题，因此我将尽力让您掌握所有必要的信息。

我正在尝试使用tablesorter对我的表进行排序。这是有问题的代码：

change

现在我的桌子看起来像这样：

Table View

如您所见，我可以单击列标题，在这种情况下，单击了“目标”，但表并未对数据进行排序。

我在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>

asp.net asp.net-mvc tablesorter