Jquery Tablesorterが機能しません！それのどこが悪いんだい？

私はJqueryを初めて使用しています.Jquery Tablesorterプラグインを使用しようとしていますが、以下のように簡単なhtmlファイルでテストしましたが、動作しません。私がブラウザで見たのは、並べ替えのないプレーンなテーブルだけで、クリック可能なヘッダはありません.Jquery Tablesorterのホームページで見たようなものではありません。私は自分のhtmlに何が間違っているのか分からない。私はこのhtmlファイルと同じフォルダに2つのjqueryファイルを配置しました。お知らせ下さい！Jquery Tablesorterが機能しません！それのどこが悪いんだい？

<html> 
<head> 
<script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="jquery.tablesorter.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() 
    { 
     $("#myTable").tablesorter({sortList: [[0,0], [1,0]]}); 
    } 
); 
</script> 
</head> 
<body> 
<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
    <th>Last Name</th> 
    <th>First Name</th> 
    <th>Email</th> 
    <th>Due</th> 
    <th>Web Site</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>Smith</td> 
    <td>John</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.jsmith.com</td> 
</tr> 
<tr> 
    <td>Bach</td> 
    <td>Frank</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.frank.com</td> 
</tr> 
<tr> 
    <td>Doe</td> 
    <td>Jason</td> 
    <td>[email protected]</td> 
    <td>$100.00</td> 
    <td>http://www.jdoe.com</td> 
</tr> 
<tr> 
    <td>Conway</td> 
    <td>Tim</td> 
    <td>[email protected]</td> 
    <td>$50.00</td> 
    <td>http://www.timconway.com</td> 
</tr> 
</tbody> 
</table> 
</body> 
</html>

出典

2013-03-30 TwentyLe

も含めるCSSファイルはありませんか？ – leppie

私はまた、あなたのブラウザのコンソールをチェックし、それらのファイルがロードされていることを確認します（確かに） – bruchowski

@leppieはい、私はデフォルトテーマのCSSを含む – TwentyLe

ここでは動作するフィドルリンクがあります。外部リソースに追加したtablesorter jsとtablesorter cssをjsfiddleに追加するのを忘れました。それを確認することができます。 <tr>代わりの<td>この内部

http://jsfiddle.net/BKgue/2/

出典

2013-03-30 05:23:30

さて、私は理解して固定し、それは今働いています:)ありがとうございました。ありがとうございます。 – TwentyLe

tablesorter jsとtablesorter cssファイルが必要だと書かれている文書はどこですか？ – DDDD

ええ、私はドキュメント全体を読んで、それが動作するためにtablesorter.cssを追加する必要はありません。私には全く意味がありません。 –

お知らせ<th>は私のために働いてからそれを防止するものでした。

<thead> 
    <tr> 
     <th>column 1</th> 
    <tr> 
</thead>

また、cssはtablesorterが動作するためには必要ありません。独自の書式設定を維持したいが、小さな矢印を表示したい場合は、次のコードが必要です。 tablesorterによって提供された3つの矢印gifをcssファイルと同じフォルダにコピーしてコピーします。あなたが望むならあなた自身の矢gif。

table.tablesorter thead tr .header { 
    background-image: url(bg.gif); 
    background-repeat: no-repeat; 
    background-position: center right; 
    cursor: pointer; 
} 
table.tablesorter thead tr .headerSortUp { 
    background-image: url(asc.gif); 
} 
table.tablesorter thead tr .headerSortDown { 
    background-image: url(desc.gif); 
}

出典

2016-10-05 02:39:34 codenoob

Jquery Tablesorterが機能しません！それのどこが悪いんだい？

答えて

関連する問題