テーブルソート関数がフィドル以外で動作しない

以下のフィドルは完全に機能しますが、空のテストドキュメントでこれを再作成しようとすると何も起こりません。私は間違って何をしていますか？テーブルソート関数がフィドル以外で動作しない

ここは私のフィドルです。 https://jsfiddle.net/1djad595/2/

これは上のフィドルの成功を再現することができない更新されたコードです。。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<link rel="stylesheet" type="text/css" href="css/custom.css" /> 

</head> 


<body> 
<script> 

$(document).ready(function() 
    { 
     $("#myTable").tablesorter(); 
    } 
); 

    </script> 
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/js/jquery.tablesorter.min.js"> 
</script> 
<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>

出典

2016-10-09 brett

[更新jsFiddle]（https://jsfiddle.net/1djad595/2/） – gaetanoM

ありがとう、私はそれが私が見落とした何かばかげていることが分かっていた。それがソート可能であることを示す矢印をどのように取得するのですか？ – brett

スタイルシートを追加するだけでこのリンクが役立ちます。 http://stackoverflow.com/questions/11763352/jquery-tablesorter-the-sorting-arrows-dont-show – Geeky

は、私はあなたが以下のコードをコピーする場合、それはあなたのために働く必要があります

あなたが最初にjQueryのlibarary、その後tablesorterを正しい順序でコード内のスクリプトライブラリを含める必要があると思う：

あなたはライブラリ（jQueryの+のtablesorter）を含めるのを忘れて

$(document).ready(function() 
 
    { 
 
     $("#myTable").tablesorter(); 
 
    } 
 
);

table.tablesorter { 
 
\t font-size: 12px; 
 
\t background-color: #4D4D4D; 
 
\t width: 100%; 
 
\t border: 1px solid #000; 
 
} 
 
table.tablesorter th { 
 
\t text-align: left; 
 
\t padding: 5px; 
 
\t background-color: #6E6E6E; 
 
\t color: #fff; 
 
} 
 
table.tablesorter td { 
 
\t color: #FFF; 
 
\t padding: 5px; 
 
} 
 
table.tablesorter .even { 
 
\t background-color: #3D3D3D; 
 
} 
 
table.tablesorter .odd { 
 
\t background-color: #6E6E6E; 
 
} 
 
table.tablesorter .header { 
 
\t background-image: url(bg.png); 
 
\t background-repeat: no-repeat; 
 
\t border-left: 1px solid #FFF; 
 
\t border-right: 1px solid #000; 
 
\t border-top: 1px solid #FFF; 
 
\t padding-left: 30px; 
 
\t padding-top: 8px; 
 
\t height: auto; 
 
} 
 
table.tablesorter .headerSortUp { 
 
\t background-image: url(asc.png); 
 
\t background-repeat: no-repeat; 
 
} 
 
table.tablesorter .headerSortDown { 
 
\t background-image: url(desc.png); 
 
\t background-repeat: no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.8/js/jquery.tablesorter.min.js"></script> 
 

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

出典

2016-10-09 20:30:05 mbadeveloper

@brettに更新しました。私はあなただけの正しい順序でぎっしりとテーブルライブラリを含める必要があると思う幸運： – mbadeveloper

これは私のためにそれをしました。私はすべてが走っていれば秩序が重要だとは知らなかった。この答えをありがとう！ – brett

テーブルソート関数がフィドル以外で動作しない

答えて

関連する問題