Javascript jquery不起作用的html表中的排序和分页列_Javascript_Jquery_Html_Css_Asp.net Mvc

Javascript jquery不起作用的html表中的排序和分页列

javascript jquery html css asp.net-mvc

Javascript jquery不起作用的html表中的排序和分页列,javascript,jquery,html,css,asp.net-mvc,Javascript,Jquery,Html,Css,Asp.net Mvc,我正在开发一个应用程序，在这个应用程序中，我应该能够在ASP.NET MVC视图中单击列标题对表进行排序。我有以下代码 1。指数 @{ Layout = null; } <!DOCTYPE html> <html> <head> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Ur

我正在开发一个应用程序，在这个应用程序中，我应该能够在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>

当我运行上面的源代码时，它会显示包含所有适当CSS的表，但当我单击列时，它从不对列进行排序。在JavaScript控制台中，我收到的异常是

我可以知道我到底在哪里犯了一个错误，导致了那些异常

您的JS依赖项包含的内容出现了问题。加载

jQuery.tablesorter.js

，无疑需要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>

致：

您需要按所需元素的类而不是id进行选择。

您必须在构建jquery的库之前包含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>

@mayabelle。它能够从控制台中删除错误，但仍然无法对表中的列进行排序。但是没有错误

<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();

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