0

ASP.NET MVC View の列ヘッダーをクリックしてテーブルを並べ替えることができるアプリケーションに取り組んでいます。次のコードがあります

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)

これらの例外の原因となった間違いを正確にどこで犯しているかを知ることができますか

4

2 に答える 2

1

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>
于 2013-10-23T16:10:12.380 に答える
1

JS 依存関係のインクルードが正しくありません。jQuery は間違いなく load 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ではなく、目的の要素のクラスで選択する必要があります。

于 2013-10-23T16:09:28.797 に答える